JQuery code will not be executed for IE <= 7.0

internet-explorerjquery

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

Best Solution

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.

Related Question