Inconsistent jQuery function when resizing elements on page load

Question

Ahoy! I've built a little script to check the size of the left-hand margin on page load, resize a div there to fill it, and change the header div to float next to it.

Here's the code:

function buildHeader() {
            var containerMarginLeft = $(".container_16:not(:first)").css("margin-left");
            var headerHeight = $("#header").height();
            $("#stripe").width(containerMarginLeft).height(headerHeight).css("float", "left");
            $(".container_16:first").css("float", "left");
            $("#header").css("margin-left", 0).width(950);
        }

        $(document).ready(function(){   
            // Manipulate layout for the first time
            buildHeader();
            // Manipulate layout when window is resized
            var resizeTimer = null;
   $(window).bind('resize', function() {
       if (resizeTimer) clearTimeout(resizeTimer);
             resizeTimer = setTimeout(buildHeader, 100);
                   });
        });

And the demonstration is here: http://robertmay.me.uk/mockups/plane.html (it creates the line that stretches on the left). Now, it works in webkit browsers. It doesn't work in Mozilla, and I've not even tried it in IE. Anyone have any ideas as to why it doesn't seem to work in Mozilla? I have a feeling it might have something to do with the CSS.

Answer 1

$(".container_16:not(:first)").css("margin-left");

This line gives a result of '0px' in Firefox regardless of how wide the window gets. However, Firebug Lite in Safari shows this value as changing depending on the width of the window.

The problem seems to be with the .css('margin-left') part of the statement, since $(".container_16:not(:first)") returns the same element in both browsers. Indeed, Firebug in Firefox shows the Computed Style for this element as having '0px' for marginLeft and marginRight, but this is non-zero in Safari.

As expected, changing from 'margin-left' to 'marginLeft' makes no difference, nor does accessing the attribute directly, like $(".container_16:not(:first)")[0].style.marginLeft, because Firefox is computing it wrong in the first place.

Sorry I don't have an answer, but hopefully this will lead you in the right direction. For me though I would try to align the layout using just CSS, resorting to JavaScript fixes only as a last resort.