Yesterday, when I arrive to the office my colleague (same one from this post) waited for me at the entry with new question/problem.
That’s what I heard:
- Hi Alex. I have a problem with my Silverlight application under FireFox – it is not being displayed on page! In IE(7) everything works fine, and in the FF is event not shown… :(
- Well – I said – let’s see…
I’ve got the sources from the company source server, launched the application on my machine IE(8) and got very “wired” sized application and on FF it was indeed not shown. When I launched the same application from the Visual Studio created *Test.html page everything was fine (both IE8 and FF).
Here is small application screenshots I’ve build during investigation:
IE8:
FF:
While investigating this issue I’ve spotted, that my colleague creates and instance of Silverlight object with “createObjectEx” function from Silverlight.js, while VS2008 creates it directly on page. It was clear for me that differences is somewhere there…
Let’s see the object being created by VS:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication47.xap" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40307.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=141205" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
Now the object as it being placed inside “innerHTL” property of parentElement object (received as a parameter):
<object type="application/x-silverlight" data="data:application/x-silverlight,"
id="Xaml1" width="100%" height="100%">
<param name="background" value="white" />
<param name="enableHtmlAccess" value="true" />
<param name="source" value="ClientBin/SilverlightApplication47.xap" />
</object>
The differences is obvious, and I thought that type & data does the “magic” and I’ve tweaked Silverlight.js to produce exactly the same object. But I was wrong… After digging some time in internet I’ve got some side note about FF HTML width/height eveluation/inheritance in runtime (for elements being added/changed as a result of JavaScript execution). I assumed, that IE8 behave exactly like FF in this case (and as it turns that it really does), so I finally found the solution I’d like to share.
When you are creating your Silverlight object with the script you have to specify width/height for parent DIV element:
So, original HTML code:
<divid="SilverlightControlHost"style="left: 0px; top: 0px;">
<scripttype="text/javascript"language="javascript">
createSL();
</script>
</div>
turns to:
<div id="SilverlightControlHost" style="left: 0px; top: 0px; width:640px; height:730px;">
<script type="text/javascript" language="javascript">
createSL();
</script>
</div>
This caused to my app to look desired way under IE8:
and under FF:
To conclude – when you have to use functions from Silvelright.js don’t forget to specify absolute size to containing DIV element, or create Silverlight <OBJECT> which doesn’t have those issues.
Hope this will help to solve the problem if it will appear to someone :)
Enjoy,
Alex