As you can see if you go to the link below in IE7/AOL, the layout breaks if you resize the window. However, click the products menu tab and it rights itself. I haven't a clue why or how to fix it, and it looks sloppy. On resizing the page, the logo and breadcrumb trail div stay where they ought to be, but my horizontal nav menu and everything below the breadcrumb div end up about 20-30 pixels off to the right. On refreshing the page, changing page, or opening a pull down menu item, it all falls back into the correct alignment.
link text
It is working as it should. The li elements in the menu are all floating to the available space. If the window does not have enough space they will float to the next available line. Nothing to see here.
Just use the CSS min-width to stop the DIV from becoming too small for the menu. Or consider a rigid layout (as oposed to a flexible one).
Add the following line to your div to make it work.
#outer {
min-width:790px;
}
To fix incorrectly rendered (in ie7) divs, which correct themselves after hovering over something else, mousing out, or any other weird event, use the below jQuery:
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
The logic is pretty simple, and I'm imagine you could do it just as easily with javascript's "innerHTML". Just rewrite the html contents of the div that's misbehaving, and this'll cause it to recompute the styles.
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
