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, form3: {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.
Related Content
- Silverlight 2.0 RTW silently released (26/08/2015)
- Silverlight 2 RC0 Available (26/08/2015)
- Silverlight Datagrid Updated (01/12/2009)
- Last few days to sign up for the 12th DotNetMarche / Community Tour 2009 workshop (26/08/2015)
- Getting ready for the 12th DotNetMarche Workshop “Community Tour 2009” (12/03/2009)
- Workshop: ‘Silverlight in Action - a starting point for Line of Business Applications’ (26/08/2015)
- More related document (40)
