Silverlight Plug-in and the Height Percentage problem in Firefox

Print Content | More

Posted by Guardian in Silverlight  Tips on Thursday 06 November 2008 at 2:59 PM

Today I added a small Silverlight application to an existing and styled website, the app was surrounded by the usual <div>:

   1: <div style="height: 100%">
   2:     <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/XXX.xap"
   3:         MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
   4: </div>

In IE7 all gone well but in FF the Silverlight application appeared to be completely collapsed and not visible at all. After some research I found that the problem is in the way Firefox renders the <object> tag when its height is relative (that is it’s a percentage). Since none of the containers around the Silverlight <object> tag had a Height defined Firefox assumed to use 0.

You have 3 possible workarounds to this problem:

  • You can set a Fixed Height for the Silverlight application (not always a good solution)
  • You can set the Height of all the main containers of the page to 100%, that is: <html>, <body> and <form> tags if you use ASP.NET, with something like this: 
       1: <style type="text/css">
       2:     html, body, form
       3:     {
       4:         height: 100%;
       5:     }
       6: </style>
  • You can use the following style for the <div> that wraps the Silverlight plug-in: 
       1: <div style="position: fixed; height: 100%; width: 100%">
       2: ...silverlight app...
       3: </div>

Choose the solution that fit best with your current styling mode.

This entry was posted on Thursday, 06 November, 2008 and is filed under Silverlight  Tips . You can follow any responses to this entry through here . You can leave a response.



Firefox, Height, Silverlight, Workarounds, 100%, Workaround

13 comments

Related Post