One of the best thing about blogging is that it is a two way thing. Responses help me to find directions to solve the post's problem. In my last post I discussed a workaround for a problem we had with Firefox. The many constructive comments gave me more insight, leading to a far better solution.
The problem was a page which is supposed to display a Silverlight control which fills a browser window
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body >
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" EnablePageMethods="true" />
<div style='height:100%; width:100%' >
<asp:Silverlight ID="TrackingMap" runat="server" Source="~/ClientBin/Map.xap" BackColor="Transparent" Windowless="true" Height="100%" Width="100%" />
</div>
</form>
</body>
</html>
It looks great in IE but in Firefox the page is completely blank. This has to with the way IE and FIrefox calculate the available width. IE takes the browser windows' width. Which is, in this scenario, the intended value. Firefox considers the width not set so it is 0. As James says it "both implementations are idiotic"
There are several work around's. A post by Giorgetti Alessandro summarizes all of them. I did some further investigations and found limitations and gotcha's on all three of them.
- Use an absolute size instead of a percentage. I discussed that in my previous post already.
- Add a position:fixed attribute to the style of the containing div. This does have a lot of drawbacks. Googling around you will find a lot of them. Besides upsetting a couple of browsers it also has a very bad influence on the content of the div. Our Silverlight control has the BackColor and Windowless attributes set. With these values the control works well with ajax popups like the calendar Extender. Setting the position:fixed attribute hides all of the popups. So that option is a no go.
- Set the height of all main containers on the page to 100%. This is a suggestion which does work; but only when applied thoroughly.
To display the page correctly requires the following addition to the markup.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
html,body, form
{
height: 100%;
}
</style>
</head>
<body >
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" EnablePageMethods="true" />
<div style='height:100%; width:100%' >
<asp:Silverlight ID="TrackingMap" runat="server" Source="~/ClientBin/Map.xap" BackColor="Transparent" Windowless="true" Height="100%" Width="100%" />
</div>
</form>
</body>
</html>
Adding the style to the page does the trick. Now the page displays well in IE and in Firefox.
But when you are using a masterpage or have nested containers things get more elaborate. Googling on Firefox Masterpage 100% will results in loads and load of similar frustrations. For the trick to work it is not enough to just add the style to the masterpage. You have to set the width and height of all containers around the control. Forget one and the control will still not show.
Thanks everybody for helping.
Posted
Tue, Jan 27 2009 2:13 PM
by
pvanooijen