Developing For .NET

I’ve written a lot of CSS over the years, so when I wanted to center my Silverlight App in my web page I figured it would be a piece of cake.  It is easy, but it gave me some frustration because it required one element that I normally would not specify.  Read on for the details.

Setting up the CSS

Here is the default CSS created by Visual Studio:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
}
#silverlightcontrolhost {
    height: 100%;
}

To accomplish this little trick I need to define a wrapper DIV in my CSS.  This Div will then wrap the entire contents of the site, so now I only have to center that DIV.  We need to define the width of the content area: it makes sense that you want to set the size of something you want to center so it can be calculated.  To do this, I set the width property of the wrapper DIV to the pixel width of my Silverlight control.

Since not all browsers interpret things the same way, we need to add a couple of items in order to center our content.  First, add text-align: center; to the body tag.  This should handle the centering for IE browsers, at least older ones.  For Firefox and Safari, we need to add margin: 0 auto; to our wrapper DIV.

This is my typical set up in traditional HTML scenarios, but when I tried using this CSS the Silverlight object would not show.  I had some video in this particular example, and it was a good thing I did or I would have gone crazy trying to figure this out: I could hear the video playing, so I knew the Silverlight object was running, I just couldn’t see it.

It turns out that you need to specify the height property as well in the wrapper DIV.  It doesn’t have to be exact, just larger than your Silverlight control.  If you make it larger than 0 but smaller than your control, it will actually truncate the control, which could be an interesting effect in certain scenarios.  I don’t know the reason for this, perhaps it’s because the Silverlight control runs in an object tag, but I’m not sure.  Please post in the comments below if you know why this was required.

Here is the final CSS I used:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
    text-align: center;
}
#wrapper
{
    margin: 0 auto;
    width: 800px;
    height: 800px;
}
#silverlightcontrolhost {
    height: 100%;
}