jQuery code will not be executed for IE <= 7.0

Question

I wrote a little in page script to relocate a small box containing the sub navigation via jQuery.

While it works in all (semi)-modern browser, it doesnt work in IE 7 and below, although other jQuery Code works. for IE 6 and 7 Can anybody tell me, what IE doesn't like in this code?

<script type="text/javascript">
/* <![CDATA[ */
        $(document).ready(function(){ 
            //
           $('#subnavigation_portlet').css({padding: '0', margin:'0', width:200})
           $("#mainheader").prepend("<div style=\"clear: none; float:left; width:"+$('#subnavigation_portlet').width()+"px;\">&nbsp;</div>");
           $(".indentation").css({width:$('#subnavigation_portlet').width(), height:$('#subnavigation_portlet').height()});


           $('#subnavigation_portlet').css({position: 'absolute', zIndex:100, top:260, left:30});

           h=$('#subnavigation_portlet').position().top+$('#subnavigation_portlet').height()-$('.indentation').position().top;
           w=$('#subnavigation_portlet').position().left+$('#subnavigation_portlet').width()-$('.indentation').position().left;

       $('.indentation').css({height:h, width:w});

       p=$('#content_column').position();

           $('#content_column').css({position:'absolute',top:p.top, left:p.left+20, zIndex:10});

           $(".indentation").css({height:$('.indentation').height()+5});
        })
    /* ]]> */
    </script>

Edit As none of the hints made by now does help, I created a full sample page, that can be found here: http://dpaste.com/109791/ . The parts that get touched by jQuery are blue-colored.

If anyone could try it out in IE 7 and report bug, that would be great. I wont be able to test it in IE 7 until tomorrow — after an important presentation :S

Edit 2 To be able to see the math-execution in litmusapp.com I added this:

jQuery('body').append('<div>'+jQuery('#subnavigation_portlet').position().top+'</div>');
       jQuery('body').append('<div>' +jQuery('#subnavigation_portlet').height()+'</div>');
       jQuery('body').append('<div> '+jQuery('.indentation').position().top+'</div>');
       jQuery('body').append('<div><br /></div>');
       jQuery('body').append('<div>'+ jQuery('#subnavigation_portlet').position().left+'</div>');
       jQuery('body').append('<div>'+jQuery('#subnavigation_portlet').width()+'</div>');
       jQuery('body').append('<div>'+jQuery('.indentation').position().left+'</div>');
       jQuery('body').append('<div><br /></div>');

       var h= jQuery('#subnavigation_portlet').position().top+jQuery('#subnavigation_portlet').height()-jQuery('.indentation').position().top;
       var w= jQuery('#subnavigation_portlet').position().left+jQuery('#subnavigation_portlet').width()-jQuery('.indentation').position().left;

       jQuery('body').append('<div>'+w+'</div>');
       jQuery('body').append('<div>'+h+'</div>');
       jQuery('body').append('<div><br /></div>');

       jQuery('.indentation').css({height:h, width:w});

       var p=jQuery('#content_column').position();

       jQuery('body').append('<div>'+p.top+'</div>');
       var l = p.left+20;
       jQuery('body').append('<div>'+p.left+'</div>');
       jQuery('body').append('<div><br /></div>');

And surprise: It works, only the return value of jQuery('#content_column').position(); is completely different than in other browsers

Answer 1

IE breaks JavaScript execution on errors, unlike other browsers. Try enabling the reporting of errors and see whether IE tells you what the problem is...

Answer 2

You might need to do:

jQuery.noConflict();

and use "jQuery" instead of "$", depending on other Javascript dependencies in your project. I don't remember the actual Javascript error I got when using "$" on IE, but it was pretty exotic.

Answer 3

There is a good chance that it doesn't make a difference, but you are missing a semicolon for the whole document.ready function as well as the first line inside of the function. Also you are leaking w, h and p into the global namespace...

Most of that probably wouldn't cause any special issues in IE. My guess is that one of those numbers is not coming back for some reason. Then the math that you are doing throws an error because you can't do math operations with null, or not 'number' variables. Try to output your values and see what doesn't get populated. This could mean that one of your selectors is off as well.

Answer 4

At line 300 of the page you link to, you have:

jQuery('.indentation').css({height:h, width:w});

but at this point, w has the value -36, and IE complains when you try to set an element's width to -36px.

In Firefox, w has the value 198 at that point.

Unfortunately I don't have time to debug this further, but as the root of the problem seems to be coming from element positions having unexpected values and messing up your calculations, I would suggest looking at your CSS, as that is presumably responsible for the positioning. If you can get that working in IE consistently, maybe that will help resolve the issue.