I am completely baffled by this and don't fully understand IE7's problem. The page in question is here and I'm talking about the top grey menu bar. On all other reasonably modern browsers it looks just fine. On IE7 (and possibly IE6 too, but we don't support that) the div.navArrow element having float:right gets pused all the way to the right, making the parent element <li> take up the remaining width of the page.
I'm not sure where to start in fixing this. Any ideas please?
I have actually fixed this by applying an special css for IE7 and below. I gave the parent <li> a float:right style, and div.navArrow a float:none. That seemed to do the trick.
Meybe will help you to use any kind. By experience I know that what position: relative; don't fix, you can fix it with zoom: 1; in IE7. Facebook uses this clearfix:
.clearfix{
zoom: 1;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
If doesn't matter that the content don't flow out of the container, you can set the container with overflow: hidden; and that use to work pretty fine.
There is a space before your DOCTYPE and is what is most likely triggering this issue. Also, define a proper DOCTYPE (such as <!DOCTYPE html>) and validate your page, its full of errors.
http://validator.w3.org/check?uri=http%3A%2F%2Fmpreview.ami.co.nz%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
