Question

I’ve never ran into this problem before.

The menu looks good on Windows, but it breaks in Firefox, Chrome and Safari on Mac OS (saw this by using browsershots). I don’t have access to a mac so I can’t debug it properly. I think it might be cause by different letter spacing or size. Does anyone have experience with this?

Thanks!

Answer 1

I’m viewing the site in firefox on a mac, and it looks like the div with id=”wrapper” is not long enough to contain the menu.

Either increase div#wrapper to 960px:

#wrapper {
margin:0 auto;
width:980px;
}

or decrease size of menu font to 16px:

#mainMenu ul li a {
background:url("images/bk_menu.gif") repeat-x scroll 0 0 transparent;
color:#175689;
display:inline-block;
font-size:16px;
height:30px;
overflow:hidden;
padding:16px 19px 0;
text-decoration:none;
}