Некорректное отображение в IE

[Sven]

Всем привет, прошу помочь в следующих проблемах.

Отображение вкладок в ИЕ

Отображение в Хроме

Код

<ul id="top_menu">
   <li><a href="/">Портал</a><b> </b></li>
   <li class="current"><a href="/forum">Форум</a><b> </b></li>
   <li><a href="">Кнопка</a><b> </b></li>
   <li><a href="">Доска объявлений</a><b> </b></li>
   <li><a href="">Каталог телефонов</a><b> </b></li>
  </ul>

CSS

ul#top_menu { list-style:none; display:block; margin:0; padding:0; }
ul#top_menu li { background:transparent url(/top_menu_bg.png) no-repeat scroll left bottom; display:block; float:left; height:21px; margin-right:2px; margin-top:7px; overflow:visible; padding:5px 20px 0 27px; position:relative; }
ul#top_menu li a { text-decoration:underline; font-size:11px; color:#7B7B7B; }
ul#top_menu li b { background:transparent url(/top_menu_bg.png) no-repeat scroll right bottom; display:block; height:26px; position:absolute; right:-20px; top:0; width:20px; z-index:2; }

И еще одна проблемка в хроме, не пойму откуда берется пиксельный пробел

Код

<table width="955px" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td class="announces" width="955px">
 <table>
<caption>Новости</caption>
  <tr>
   <td style="padding: 0px 0px 0px 20px; vertical-align: middle;">
  <a href="#"><img src="/img1.jpg" width="96" height="60" style="background: #ffffff; padding: 4px; border: 1px solid #f87909;"></a> 
</td>
<td width="10px"></td>
<td style="vertical-align: middle;">
<strong></strong><p>Text</p> 
   </td>
<td width="25px"></td>
<td style="vertical-align: middle;">
  <a href="#"><img src="/img1.jpg" width="96" height="60" style="background: #ffffff; padding: 4px; border: 1px solid #f87909;"></a> 
</td>
<td width="10px"></td>
<td style="vertical-align: middle;">
<strong></strong><p>Text</p> 
   </td>
  </tr>
 </table>

</td>
</tr>
</table>
<div class="shadow"></div>

CSS

.announces { background:#FBFBFB url(n_a_bkg.png) repeat-x 0px 21px; padding:0;}
.announces table { border:1px solid #94A3AA; width:100%;  padding: 0px 0px 10px 0px; width: 955px;}
.announces caption { background:transparent url(/title_bkg.jpg) repeat scroll 0 -162px; text-align:left; padding:3px 10px; font-weight:bold; color:#FFFFFF; }

Заранее благодарен.

Edited July 12, 2010 by Sven

[d0ublezer0]

менюшкам сделайте полную ширину и отрицательные margin и не надо будет указыват overflow:visible;

вот посмотрите как у меня сделано меню

Edited July 12, 2010 by d0ublezer0

[Sven]

d0ublezer0, дело в том, что каждая вкадка идет одной картинкой и каждая вкладка должна накладываться на следующую (т.е. правый край), но в ИЕ как вы видите не хочет, картинка вылазит вперед.

На вашем примере не понял немного

Edited July 12, 2010 by Sven

[Sven]

Есть еще предложения? Очень нужен совет

[d0ublezer0]

Я же вам дал совет.

Что конкретно не понятно в примере?

Дайте ссылку на вашу страничку, если есть возможность.

Edited July 12, 2010 by d0ublezer0

[Sven]

Ссылку дать не смогу, извините.

Сама вкладка это одна картинка, но та часть которая накладывается сверху га следующую вкладку - накладывается с помощью z-index, но в ИЕ почему-то не работает.

Чем это можно заменить?

Edited July 12, 2010 by Sven

[d0ublezer0]

Sven вы меня не слышите. Или не хотите слышать.

Хорошо, я допускаю, что у вас нет FireBug и вы не можете определить, где в моем коде стили, относящиеся к меню.

Вот они:

ul.menu li  {
display:inline;
}
ul.menu li.active a, ul.menu li a:hover {
background-image:url("/templates/zebra-light/images/top_menu_bg_active.gif") !important;
color:#E1FF0B;
line-height:36px;
text-decoration:none;
z-index:2 !important;
}
ul.menu li a {
background-image:url("/templates/zebra-light/images/top_menu_bg_passive.gif");
background-repeat:no-repeat;
color:#658506;
display:block;
float:left;
font-size:12px;
height:25px;
line-height:25px;
margin-left:-18px;
overflow:hidden;
text-align:center;
text-decoration:none;
white-space:nowrap;
width:135px;
z-index:1;
}

Теперь, я думаю, у вас всё должно проясниться.

[Sven]

У Вас ширина кнопочек полная, а к моим кнопкам полную ширину нельзя применить (Она = 300px), поэтому справа на каждую вкладку накладывается еще одно изображение, точнее кусочек изображения - чтоб вкладка выглядела закругленной...но в ИЕ почему-то это не работает - сама вкладка становится поверх этого кусочка, установка z-index для вкладки - не помогает

[shvv]

  Sven said:

У Вас ширина кнопочек полная, а к моим кнопкам полную ширину нельзя применить (Она = 300px), поэтому справа на каждую вкладку накладывается еще одно изображение, точнее кусочек изображения - чтоб вкладка выглядела закругленной...но в ИЕ почему-то это не работает - сама вкладка становится поверх этого кусочка, установка z-index для вкладки - не помогает

Кажется, что без ссылки дело не пойдет.

[d0ublezer0]

shvv, да, пожалуй, ты прав.

Sven, наш с вами разговор уже почти перетек в русло "сделайте за меня, я не хочу думать".

Выложите страничку на любой бесплатный хостинг, там и видно будет, что у вас не так.

[Sven]

  d0ublezer0 said:

Sven, наш с вами разговор уже почти перетек в русло "сделайте за меня, я не хочу думать".

Это не так Я сам не люблю когда за меня делают, просто прошу указать на мою ошибку.

http://allmobile.devart.pro/forum/

Вот сам сайт, менюшка именно в ИЕ хандрит

Edited July 13, 2010 by Sven

[d0ublezer0]

Ну вроде как-то так наверное

Надеюсь, я правильно понял вашу задачу.

[shvv]

  Sven said:

Это не так Я сам не люблю когда за меня делают, просто прошу указать на мою ошибку.

http://allmobile.devart.pro/forum/

Вот сам сайт, менюшка именно в ИЕ хандрит

Проблема в том, что в ИЕ свое применение z-index. Если родители позиционированы, то z-index дочерних элементов влияет только на их позицию по отношению к другим дочерним элементам.

В этом случае нужно, элементам li справа налево назначить z-index по возрастающей, а соответственно текущей закладке - самый большой.

Edited July 14, 2010 by shvv

[Sven]

d0ublezer0, почти. Справа поверх следующей, а слева на заднем плане

  Quote

В этом случае нужно, элементам li справа налево назначить z-index по возрастающей, а соответственно текущей закладке - самый большой.

А как это получится назначить - если свойство задается в CSS?

[d0ublezer0]

Ну тогда измените в моем коде:

#menu li {
float:right;
}

UPD: ну, я сам поменял, посмотрите.

Edited July 14, 2010 by d0ublezer0

[Sven]

Спасибо, попробую нарезать существующие картинки.

[d0ublezer0]

Зачем их резать?

Возьмите те, которые я уже сделал для вас. И код возьмите, мне не жалко.

[Sven]

У меня же два цвета) Для неактивной и активной вкладки

а z-index'om эту проблему никак не решить?

Днло в том, если указать з-индекс для само вкладки - уголок, который должен быть поверх - исчезает под вкладки

Edited July 14, 2010 by Sven

[d0ublezer0]

А, ну тогда да, порежьте.