Inconsistent page layout :(

Question

My page is altered after loading by a lot of jQuery to get the layout I want. (Decision based alignment etc.) But at first when I load it it doesn't work (messed up alignment). I close it, follow the link to the page and it works perfectly. But then I refresh the page (F5) and it's messed up again. And it seems to function differently on Chrome and Firefox.

I call the function like this:

    <script>
 $(document).ready(function() {
   $.fn.altlayout();
 });
    </script>

This seems very peculiar to me. Maybe I'm missing something basic? Like how JS works with caching(?) perhaps? Thanks.

Answer 1

Try $(window).load instead. $(document).ready fires as soon as the browser has the HTML. $(window).load waits for images to be loaded.

Also, I know this might not be very helpful to your specific problem, but I've found "coding for design" to be a tremendous headache. If you're doing this for a browser fix, maybe you can offer the problem browser a fixed stylesheet instead? like

<!--[if IE 6]>
<link type="text/css" media="screen" rel="stylesheet" href="ie6fix.css" />
<![endif]-->