Question

Was doing some testing with a design I coded and it works well in FF 13, Chrome 21, IE 7/8 & Opera 11.62 for Windows and Safari 5.1 for OS X.

I only have WinXP so I had to use Adbobe Browserlab to test for OS X and IE 9.

Problem is in IE9 and FF 11 for OS X the nav seems to drop down like it’s too wide; but it’s not, I have checked it.

The URL is: http://www.condorstudios.com/stuff/temp/

Just tried the below changes but still no change in those browsers..

#header .nav ul {
    width: 992px; // New
    margin: 0px auto; // Changed to 0px margin, but is now centered to get the same effect
}

#header .nav li ul.sub {
    position: absolute;
    display: none;
    width: auto; // Needed to add so it didn't inherit width from above
    /*left: -1px;*/ // Removed
    top: 45px;
    z-index: 1000;
}

Answer 1

Fixed it. Seems those browsers didn’t seem to like the text-indent I had on the contact button, so by removing..

#header .nav li.contact {
    text-indent: 1px;
}

It now works!