Меню сайта выглядит хорошо во всех браузерах в Windows, но не работает в Mac OS

Question

Я никогда не сталкивался с этой проблемой раньше.

Меню выглядит хорошо в Windows, но оно разрывается в Firefox, Chrome и Safari в Mac OS (это можно увидеть с помощью снимков браузера). У меня нет доступа к Mac, поэтому я не могу отладить его должным образом. Я думаю, что это может быть вызвано разным расстоянием между буквами или размером. У кого-нибудь есть опыт с этим?

Спасибо!

Answer 1

Я просматриваю сайт в Firefox на Mac, и похоже, что div с id = "wrapper" недостаточно длинный, чтобы содержать меню.

Либо увеличьте div # wrapper до 960px:

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

или уменьшите размер шрифта меню до 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;
}

Answer 2

Насколько я вижу, в Safari 4 все выглядит отлично, если только вы не публикуете скриншот. Но может случиться так, что у вас будет <div id="top-links">, встречающееся дважды: [Неверный] Проверка разметки client.newblack.ro integra - W3C Markup Validator . Прокрутите вниз в отчете проверки, чтобы увидеть номера строк и исходный код.