Горизонтальная навигация CSS Разница между Firefox 3.6 и Firefox 4 - PullRequest
Новая
       25

Горизонтальная навигация CSS Разница между Firefox 3.6 и Firefox 4

0 голосов
/ 15 июня 2011

В FF4 ссылка «Связаться с нами» появляется под моей ссылкой «Главная» в горизонтальной навигации вверху страницы на www. avaline .com (и на всех страницах этого домена). В FF 3.6 он выглядит хорошо и вписывается в элемент ul шириной 900 пикселей.

Чего мне не хватает, чтобы заставить это работать лучше в браузерах? 

<ul id="nav2">
      <li><a href="/" title="promotional products home">home</a></li>
      <li><a href="/Information/Product-Testing-Library" title="product safety">product safety</a></li>
      <li><a href="/Current_Specials?loc=top" title="current promotional product specials">current specials</a></li>
      <li><a href="/Marketing-Tools/2011-Digital-Catalog-and-Request-Form" title="digital and request catalog">request catalog</a></li>
      <li><a href="/Marketing-Tools?loc=top" title="marketing tools">marketing tools</a></li>
      <li><a href="/Information/About-Us" title="about us and our promotional products">about us</a></li>
      <li><a href="/Contact-Us" title="Contact us about our promotional products">contact us</a></li>
    </ul>


#header_top ul#nav2 {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 79px; /* was 80px ll */
    width: 900px; /* was 776 ll */
    left: 7px; /* was 64px */
    font-family: Arial, Helvetica, sans-serif;
}
#header_top ul#nav2 li {
    float: left;
    font-weight: bold;
    padding: 0 23px;
    font-size: 11px;
    list-style:none;
}
#header_top ul#nav2 li a {
    color: #fff;
    text-transform: uppercase;
}
#nav3 a, #nav3 a a:link, #nav3 a a:visited, #nav2 li a, #nav2 a a:link, #nav2 li a a:visited, #nav1 li a, #nav1 a a:link, #nav1 li a a:visited {text-decoration: none;} 

#nav3 a:hover, #nav3 a:active, #nav2 li a:hover, #nav2 li a:active, #nav1 li a:hover, #nav1 li a:active {text-decoration:underline;} /* ll */

1 Ответ

0 голосов
/ 15 июня 2011

Это нормально работает на моем Firefox (v 4.0.1), работающем под Windows7 x64 Home Premium

Однако я мог бы воспроизвести вашу «ошибку» в IE9, однако это было легко исправить, изменив отступэлемент li в 21px (вместо 23px).

jsFiddle: http://jsfiddle.net/KBgKa/5/

...