How do you fix the Silverlight application shift that occurs in the Firefox browser?

Question

Hi, Currently I have an Silverlight application that when run on Firefox browser (ver 3.6) the entire contents of the Silverlight application shifts a little, and also the scrollbars on both the bottom and the side appear when I first use it. This does not happen in IE 8. How can I fix this in Firefox so it doesn't happen? The project type I created was the "Silverlight 3 Application + Website" via Expression Blend 3. This the code I am using in my MainPage.xaml:

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="StackoverflowExample.MainPage"
 Width="640" Height="480">

 <Grid x:Name="LayoutRoot" Background="Green">
  <Rectangle Fill="#FFBB2020" Stroke="Black" Margin="155,58,266,178"/>
  <Button Margin="199,180,302,236" Content="Button"/>
 </Grid>
</UserControl>

Answer 1

This happens because Firefox draws a 1px dashed border around the element with 100% width and height when you click on it, making it too large for the window to fit by just 1px. You can fix this with the solution I found here:

Yes, quite annoying indeed.

Could somebody tell us wether this is on purpose or wether it's a bug, please?

I've been using:

:focus { outline: 0; }

Do we need to find a new trick?

You don't necessarily need the :focus pseudo-class, you can just set the style of the <object> to use the outline: 0;.