Silverlight javascript problem - resizing a Silverlight application - cross browser issue

Question

Hi, I'm currently writing a SilverLight application that primarily uses a DataGrid. The user can add or remove rows from the grid.

The grid can get quite large so I need to resize the application dynamically every time a row is added/removed.

Currenty I'm doing the following to resize the app dyamically.

In the codebehind I'm using the LayoutUpdated event of my root stack panel to call a javascript function on the html page

    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
        this.rootStackPanel.LayoutUpdated += new EventHandler(LayoutRoot_LayoutUpdated);
    }

    void LayoutRoot_LayoutUpdated(object sender, EventArgs e)
    {
        HtmlPage.Window.Invoke("ResizeObject", new object[] { this.rootStackPanel.RenderSize.Height });
    }

The javascript sits in my MVC master page:

 <script type="text/javascript">

        function ResizeObject(height) {

            var host = document.getElementById("silverlightControlHost");

            host.style.height = height + "px";

        } 

    </script>

And my view has the actual silverlight object

<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
        width="100%" height="100%">
        <param name="source" value="<%=Url.Content("~/ClientBin/TimeSheet.SilverLight.xap") %>" />
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />
        <param name="autoUpgrade" value="true" />
        <% Response.Write(string.Format("<param name=\"initParams\" value=\"{0}\"/>", initParams)); %>
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration: none">
            <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                style="border-style: none" />
        </a>
    </object>
    <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
        border: 0px"></iframe>
</div>

This all works fine in IE8. However in firefox the javascript function doesn't even get called (I've debugged in firebug and tried alert boxes).

Any ideas?

Thanks in advance for any help.