VPF::Помогите понять почему span странно сьехал в ИЕ 7

HellanD

Дата 21.6.2009, 20:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 443
Регистрация: 16.5.2006
Где: Киев

Репутация: нет
Всего: 2

Добрый день!

Я делаю меню для сайта. Меню в виде табов со скругленными краями.
Скругления делаю li и span.

Почемуто код работает во всех браузерах кроме ИЕ 7(6)
В них правый край менюшки не открисовываеться.

Посмотреть код можно тут: http://j-in.org.ua:9000
Вот код

Код


<div id="menu">

  <ul id="layer1">
    <li     id="current" >
      <span><a href="/">Главная</a></span>
    </li>
    
    

    <li  >
      <span>
    <a href="/section/News"> Новости </a>

      </span>
    </li>

  

    <li  >
      <span>
    <a href="/section/Articles"> Статьи </a>
      </span>
    </li>

  

    <li  >
      <span>
    <a href="/section/Electronics"> Японские компании </a>
      </span>
    </li>

  

    <li  >
      <span>

    <a href="/section/Grammar"> Разговорный клуб </a>
      </span>
    </li>

  
  </ul>
</div>

Вот CSS:

Код


#menu {
margin-left:150px;
}
#menu ul#layer1 {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0;
}
#menu ul#layer1 li {
background:transparent url(/site_media/images/left.png) no-repeat scroll left top;
float:left;
margin-left:6px;
padding-bottom:6px;
padding-left:6px;
padding-top:4px;
}
#menu ul#layer1 li span {
background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top;
margin-right:6px;
padding-bottom:6px;
padding-right:6px;
padding-top:4px;
}
#menu li a {
background-color:#BF1E2D;
color:#FFFFFF;
padding:4px 35px 6px;
text-decoration:none;
}
#menu ul#layer1 li#current span {
background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top;
}
#menu ul#layer1 li#current {
background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top;
}
#menu ul#layer1 li#current a {
background-color:#E3E3E3;
color:#BF1E2D;
}

Помогите плиз разобраться!

--------------------

Мой сайт на django
Japanese Innovations

bazzjr

Дата 22.6.2009, 09:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Вот что тебе нужно:

Код


#menu ul#layer1 {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0;
}
#menu ul#layer1 li {
background: url(/site_media/images/left.png) no-repeat left top;
float:left;
margin-left:6px;
padding-left:6px;
}
#menu ul#layer1 li span {
background: url(/site_media/images/right.jpg) no-repeat right top;
float:left;
margin-right:6px;
padding:3px 6px 4px 0;
}
#menu li a {
background-color:#BF1E2D;
color:#FFFFFF;
padding:3px 35px 4px 35px;
text-decoration:none;
}

Работает во всех браузерах одинаково.

Это сообщение отредактировал(а) bazzjr - 22.6.2009, 09:54

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »