IE7 - jquery addClass() breaks floating elements
- by Patrick
I have this nav that uses addClass('hover') when the mouse is rolled over an item. This works fine except in IE7 when the addClass function is called every element with float:left stops floating and the page totally loses its structure.
This is my JS:
_this.position_sub_menus = function(){
$('#header #nav > ul > li').mouseenter(
function(e){
pos = $(this).offset();
height = $(this).height();
lvl2 = '#' + $(this).attr('id') + '-submenu';
if( $(this).position().left > ($('#nav').width()/2)){
pos.left = pos.left - $(lvl2).width() + $(this).width();
}
$(this).addClass('hover');
$(lvl2).show();
$(lvl2).css( { 'left' : (pos.left - 12) + 'px', 'top' : pos.top + height + 'px'});
}
);
This is the CSS of the of the elements that break:
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
It's CSS from the 960 grid system.
When I comment out the $(this).addClass('hover'); line the floated elements dont break.
Is anyone familiar with this IE7 problem?
Thanks guys
