CSS-элементы списка навигации, появляющиеся под Nav div.Но выглядит найти в Chrome? - PullRequest
0 голосов
/ 04 апреля 2011

Моя навигация выглядит хорошо в Chrome, но в Firefox и IE элементы списка отображаются ниже (примерно на 15 пикселей ниже) div контейнера nav. Может ли кто-нибудь помочь мне?

Вот ссылка: http://jwstudio.us/bkpa/

CSS:

nav {

position: relative;
background-image: none;
background-repeat: no-repeat;
float: left;
background-color: #DBD0CA;
z-index: 3;
margin-top: -115px;
margin-left: -2px;
height: 29px;
width: 945px;
margin-right: 10px;
background-position: left;

}

nav ul {

position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;

}

nav ul li a {

position: relative;
height: 27px;
float: left;
z-index: 5;
text-align: left;
padding-left: 11px;
list-style-type: none;
text-decoration: none;
color: #8F181B;
font-weight: normal;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #DBD0CA;

} * * тысяча двадцать-один

nav ul li a: hover, a: active {

position: relative;
height: 27px;
color: #FFF;
background-image: url(images/nav_rollover.png);
z-index: 6;
padding-top: 3px;

}

1 Ответ

1 голос
/ 04 апреля 2011

Вам необходимо сбросить заполнение на ul, так как именно левое заполнение заставляет элемент перейти на следующую строку:

nav ul {

  position: relative;
  display: inline;
  list-style-type: none;
  height: 27px;
  z-index: 4;
  padding-top: 3px;
  margin-top: -115px;
  padding: 0;          // added
}
...