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

Sven · July 12, 2010

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

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

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

Код

<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 · July 12, 2010

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

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

Edited July 12, 2010 by d0ublezer0

Sven · July 12, 2010

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

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

Edited July 12, 2010 by Sven

Sven · July 12, 2010

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

d0ublezer0 · July 12, 2010

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

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

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

Edited July 12, 2010 by d0ublezer0

Sven · July 12, 2010

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

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

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

Edited July 12, 2010 by Sven

d0ublezer0 · July 13, 2010

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 · July 13, 2010

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

shvv · July 13, 2010

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

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

d0ublezer0 · July 13, 2010

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

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

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

Sven · July 13, 2010

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

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

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

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

Edited July 13, 2010 by Sven

d0ublezer0 · July 14, 2010

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

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

shvv · July 14, 2010

Это не так Я сам не люблю когда за меня делают, просто прошу указать на мою ошибку.
http://allmobile.devart.pro/forum/
Вот сам сайт, менюшка именно в ИЕ хандрит

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

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

Edited July 14, 2010 by shvv

Sven · July 14, 2010

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

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

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

d0ublezer0 · July 14, 2010

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

#menu li {
float:right;
}

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

Edited July 14, 2010 by d0ublezer0

Sven · July 14, 2010

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

d0ublezer0 · July 14, 2010

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

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

Sven · July 14, 2010

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

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

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

Edited July 14, 2010 by Sven

d0ublezer0 · July 14, 2010

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

Sign In

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

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information