IE7 - jquery addClass() breaks floating elements

Question

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

Answer 1

Rex M is probably on to something here. if your hover class adds any padding, margin, padding, or changes the width of the element, then it will make it too large. Sometimes, these can happen in IE because of the box model bug . In 960gs, if the elements get too long, then they will go to the next line.

If this doesn't help, could you give us a link to an example?