White Space around the Silverlight 1.1 Root Canvas

Figured since I just spent a good bit of time chasing this down, it would make sense to post a tip about it…

I’m working on updates to the web site for ReMIX 07 Boston, and I’m in the process of adding a Silverlight-enabled Session/Speaker/Bio page. One thing I ran into is that when I initially added the Silverlight to the page, it appeared to have a white border around the root Canvas object, which I couldn’t seem to figure out how to remove.

Turns out all that was required was to use absolute positioning for the <div> element that hosts the Silverlight control, and set it’s left and top properties to 0px. I had tried absolute positioning earlier, and thought that it didn’t work, but given how badly I type, I’m guessing I must have misspelled something in the CSS and didn’t notice. Here’s what the CSS code would look like:

    <style type="text/css">
            position: absolute;
            top: 0px;
            left: 0px; 

So if you run into this, now you kn

Technorati Tags: ,

ow how to fix it.

Comments (3)

  1. Björn says:

    While this might work for your special case, it will most likely break for allmost every other case. Absolute positioned elements are removed from the flow – e.g. the do not affect layout of other elements – and top/left: 0 (no px or other unit needed for 0) requires that the parent does not have position: static (which is the default), otherwise the pos: abs element ends up being positioned at the first grand-(grand-(…))parent element that is positioned – in the default case this will be html, so you will end up stacking all canvases at the top-left of the page.

    The real solution is to eleminate the property that does cause the offset (margin on the element itself or padding on its parent). To easily identify the property, use a tool such as the WebDev Toolbar for IE, Firebug for Firefox or the Inspector in Safari.

  2. gduthie says:

    Excellent point, Björn.

    You’re right that my solution could be considered somewhat of a hack, but it’s what worked for my solution, in which the Silverlight app is added to an existing ASP.NET Content control via an <iframe> element. As such, there aren’t any other elements in that part of the tree that might overlap.

    But I appreciate your pointing it out, since that could save other folks the pain of discovering that my technique may not work for all situations.

  3. balla says:

    According to your iframe example what would probably also work is:

       <style type="text/css">

           body { margin: 0px; padding: 0px; }