IE6 specific javascript code

Question

Hey guys --

I have a validation script that absolutely positions a series of <span>s using positioning. However, the positioning is off by about 10px to the right (aka 10 more pixels need to be added to the right) in IE6. I was wondering if I could jQuery to detect IE6 and add 10 more pixels to the right. This is the code I have:

if ( ($item.val() == nameOrig) || ($item.val() == "") && ($.browser.msie && $.browser.version.substr(0,1)>6) ) {

        $(wrong).appendTo('body').hide().fadeIn("normal").css({
            'top' : position.top + 'px',
            'right' : ($item.width()*1.5) + parseFloat($item.css('padding-left'), 10) + parseFloat($item.css('margin-left'), 10) + parseFloat($item.css('padding-right'), 10) + extraSpace +'px'
        });

        $item.addClass('textError');
    }

Basically, I couldn't figure out how to add 10 more pixels to IE6, so I wanted to refrain the <span> (stored in variable wrong) from even showing up in IE6. But even that didn't work (aka, it showed up in IE6...ugh).

EDIT: if someone could just explain to me why the above code works for IE6 while it specifically says in the if statement to have the script work only if it's IE > 6

Any ideas?

Thanks! Amit

Answer 1

I think you'll find the issue is the old Box Model problem, basically IE uses a different model for where padding, margins, etc are in relation to the entity width/height. It's very well documented on Wikipedia here.

I'd suggest having some additional/different CSS entries that are only processed for IE6 that take this into account, i.e. by making the width larger. You can do that via conditional comments, also documented here.