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
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.