Стили навигации li не отображаются в Chrome или Safari, нормально в Firefox

Я работаю над простым HTML-сайтом, и у меня проблемы с навигацией, которая не отображается правильно в Chrome и Safari, но в Firefox все в порядке (все на Mac).

Навигационные элементы должны быть блоками с отступом 15px, плавающими влево рядом друг с другом, показывая светло-зеленый фон при наведении. В Chrome и Safari они просто отображаются со стилями ссылок страницы по умолчанию без плавающих элементов.

Сайт можно увидеть здесь: http://www.rjlacount.com/clients/GreenTree

Спасибо за любую помощь!

А вот CSS, который я использую для навигационного меню:

ul#nav {
    font-size:16px;
    border-top:1px solid #a4a4a4;
    border-bottom:1px solid #a4a4a4;
    text-align:center;
    margin:40px auto;
    list-style:none;
}

ul#nav li a:link, ul#nav li a:visited {
    float:left;
    padding:15px 43px;
    text-decoration:none;
    font-weight:normal;
    color:#000;
}

ul#nav li a:active, ul#nav li a:hover {
    background:#e6ffdc;
    text-decoration:none;
}

ul#nav li.highlight a:link, ul#nav li.highlight a:visited {
    background:#e6ffdc;
}

html padding css margin positioning
person R.J.    schedule 16.03.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Глядя на ваш источник, похоже, проблема в вашей разметке. Теги <a> должны быть внутри тегов <li>, это автоматически делается в firefox, но не в webkit.

В вашем CSS, который вы предоставили, вы также ищете любые якоря в элементе списка, поэтому он все равно не сможет его найти, так как они у вас неправильные.

person Josh    schedule 16.03.2011
comment
Спасибо. Есть ли способ, которым я могу разместить свои теги ‹a› внутри тегов ‹li›, но по-прежнему иметь возможность выбора всего ‹li›? Когда я так настроил раньше, можно было выбрать только текст; Я хочу красивую большую кнопку, на которую можно нажимать. - person R.J.; 16.03.2011
comment
@Р.Дж. похоже, что у вашего ‹a› уже есть float: left, поэтому весь li будет доступен для выбора, если вы измените его так, как предложил Джош. Я бы также рекомендовал удалить имя тега, если вы делаете селектор идентификатора, поскольку идентификатор уже уникален, поэтому что-то вроде #nav будет достаточно. На самом деле вам даже не нужны имена тегов для селекторов классов. что-то вроде #nav .highlight a:link. - person Koes Bong; 16.03.2011