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

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.