Silverlight display problem

Question

I have created a nice silverlight control doing exactly what I want it to do, and it looks great :) When I host it in the test projects ASPX sample file or the HTML sample file it shows up nicely.

I now have to use the control in my existing ASP.NET 2.0 project, which has a fancy design. The problem I'm having is that the control don't show up exactly how it should:

• The loading progress don't show
• The control usually don't become visible before I move my mouse over the aria where it's contained

Obviously it's something with my HTML/CSS design causing this, but it will be extremely time consuming to find the issue - so does anyone have knowledge in this area? What are the rules around how to make sure the control is displayed properly? What CSS properties should be used?

PS: Since I have a 2.0 app, I'm using the object tag approach to Silverlight, and it's contained in a DIV with height and width set in style.

Code snippet was requested. It's something like this (basically a copy of the HTML test page from the silverlight test project (which work perfectly)):

<div id="silverlightControlHost" style="height: 300px; width: 750px;">
    <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2"
    width="100%" height="100%">
    <param name="source" value="Contiki.SilverLight.FileUploader.xap" />
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />                            
    <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
     style="border-style: none" />
    </a>
    </object>
    <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>

This DIV is contained in a cell in a table, which again is part of a larger design. There's a lot of CSS as mentioned. Don't know if this helps...

Answer 1

Hi Torbjørn, If you can post a small code snippet that illustrates your problem it would be helpful.

Answer 2

CSS issues can be difficult to debug sometimes. Is the behavior the same in different browsers? Is your CSS using "float"s anywhere? Does the app work properly on the same page outside of the table and then outside of the div?

Answer 3

As Adam says, CSS issues are a real PITA. Typically when I run into something like this I start by pointing to a blank CSS instead of the "fancy" one and then start adding the styles back in until I'm able to reproduce the issue.

Answer 4

Found the cause myself...

It turns out Silverlight has a display problem when the control is placed in a html table. Found information about this on the silverlight forum. It was about the beta 2, but I have upgraded to the release version, and it's still a problem.

Try this. Add a height and a width to the table containing the Silverlight control. You may also want to add a single character of white space inside the TD containing the control.

Basically when the table was rendered it couldn't 'see' the size of the contents so it either didn't render at all or only rendered to the size of a single white-space character.

-- John Stockton

My design is quite complex with nested tables, so I haven't actually been able to make it work yet.

UPDATE:

The actual fix I ended up implementing was a small JavaScript that "refreshes" the containing <DIV>. Here it is:

<script type="text/javascript">
    function refreshSL()
    {
        var div = document.getElementById('silverlightControlHost');
        div.style.display = 'block';
    }
    refreshSL();
</script>

I placed this in my HTML below the actual SL markup, and then it worked (I guess calling it on the page loaded event would be the proper thing to do.

Answer 5

LOL

I had the same exact problem and it was driving me mad. The problem was isolated to Internet Explorer. Works fine in all other browsers (even Opera).

Your solution is a hack for sure. Since this is really a work around for a bug in IE you can officially get away with it.

Technically we should not be using tables for layout but in the real world it is the only way to get things to work consistantly cross browsers.