Firefox and the 100% DIV revisited

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.



  1. Use an absolute size  instead of a percentage. I discussed that in my  previous post already.

  2. 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.

  3. 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.

This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Hiren Joshi

    Setting the form height was the issue and your post helped me. Thanks a lot.

  • http://petersgekko.codebetter.com pvanooijen

    @Peter: Your rule applies the style recursivly to all elements contained ? That would be too much as it would also apply the height:100% to any labels and the like accompanying the silverlight control. Now I know I have to set the width attribute it’s overseeable.

    @fschwiet.. Saw that. But that’s mainly about getting proper margins inside, my trrouble was getting anything at all.

    @Craig It humbles you, our code could be great but IE/Safari/Firefox/etc have different opinions.
    And in case I want to be in full control I just use Silverlight. The world of xaml and C# inside of silverlight pales the world of html and javscript.

  • http://www.dotnettricks.com craig

    shit like this makes me want to give up web development. LAME!

  • fschwiet

    Something similar just came up on stackoverflow. This solution http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin#485887 is another option, set the margin values to 0.

  • http://neverrunwithscissors.com Peter Mounce

    You could use a rule like:
    .oneHundredHigh,
    .oneHundredHigh *
    {
    height:100%;
    }

    on your top-most container, instead of needing to remember to add a directive on each element down the DOM?

    Retain your
    html,body { height: 100%; }
    rule, though, since one rarely doesn’t want that to happen if you want something to be tall.

  • http://petersgekko.codebetter.com pvanooijen

    No way, it is a browser issue.

  • http://www.netprosys.com Kamran Shahid

    I think there are better way to Let Silverlight Control Fill the browser.
    U can simply remove width height of the UserControl in the Xaml of silverlight control.

  • http://petersgekko.codebetter.com pvanooijen

    Sorry, corrected.
    BTW, Anybody know a good way to get html in a blogpost without redoing it all by hand ?

  • Phillip

    Also your example has 1 opening div tag and two closing tags.

  • https://petersgekko.codebetter.com pvanooijen

    You are right, that’s the best and clearest place. Updated. Thanks

  • http://braincells2pixels.net rams

    Is there a reason the style is not inside the head tag?