This was a rather interesting one that I only stumbled upon.
Now that Silverlight 3 has been released, I figured it was time to update some web sites that I look after and get away from the plain HTML with CSS that I had been using.
It took much less time that I thought to get the first site set out and running the way I wanted or so I thought.
Most of the site content was put into a ScrollViewer as I knew it would extend past the bottom of the window and someone viewing the site would be required to scroll at some point in time.
I developed the site on my laptop and it all through development and deployment it looked fine, but when I happened to take a look at the site on my desktop machine I noticed that there were two ScrollBars showing on the Internet Explorer window.
This was a mystery to me as I knew that there were not two ScrollBars when I was developing the site.
After a giving this problem some serious though for a while I realized what the problem may be. Normally I keep both machines the same but currently my laptop and desktop were different in one aspect.
Internet Explorer.
My laptop was running Vista with Internet Explorer 7 and my desktop was running Vista with Internet Explorer 8. At least now I knew where the problem lay. Not how to fix the problem mind you, just why I was seeing what I was.
As it turns out the fix is quite simple.
When Visual Studio creates a Silverlight application, and the accompanying web site that can host the Silverlight application, it adds some CSS Style for the page.
<head>
<title>SilverlightApplication4</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
In the HTML above it is the value of the overflow property that determines if the ScrollBar for the window is displayed or not.
IE8 is just different enough from IE7 that setting the overflow to auto generates the extra ScrollBar. I suppose a better way to say it is that it does not let the ScrollBar from the Silverlight application replace the ScrollBar of the IE window like it does in previous versions.
To get around this problem, you need to change the overflow setting from “auto” to “hidden”.
<head>
<title>SilverlightApplication4</title>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
Once overflow is set to hidden, IE will open without a ScrollBar which leaves the person viewing the site with the ScrollBar of the Silverlight application to use instead.
These are the kinds of problems that I like. Nice and easy to fix.