frD-Выступающая закладка - проблема отображения в IE

Ladoga · June 11, 2007

Вот возникла проблема: нужно сделать горизонтальное меню, в котором активный пункт (т.е. выбранный) отображался как закладка с выступающей верхней частью. Делаем margin-top:-2px; и вроде все работает, но только в FF и в Опере - в IE не отображается как надо. Подскажите, плиз, что можно сделать.

Привожу коды.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
 <link rel="stylesheet" type="text/css" href="css.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="MenuToolbar">
 <ul id="MainMenu">
 <li class="ActiveMenu"><a href="#" class="nodecoreMenu">JJJJJ</a></li>
 <li><a href="#" class="nodecoreMenu">НОВОСТИ</a></li>
 <li><a href="#" class="nodecoreMenu">АНАЛИТИКА</a></li>
 <li><a href="#" class="nodecoreMenu">НАУКА</a></li>
 <li><a href="#" class="nodecoreMenu">ТЕХНИКА</a></li>
 <li><a href="#" class="nodecoreMenu">СОФТ</a></li>
 <li><a href="#" class="nodecoreMenu">ИГРЫ</a></li>
 </ul>
 <div id="search">
 <form id="search_form" action="search/" method="get">
 <input type="text" /><button type="submit">Найти</button>
 </form>
 </div>
 </div>
</body>
</html>

..и CSS:

#MenuToolbar {
 clear:both;
 margin:0px;
 padding:1px 0;
 height:30px;
}
#MainMenu {
 float:left;
 margin:0px;
 padding:0;
 height:30px;
}
ul#MainMenu li {
 float:left;
 padding-left:15px;
 padding-right:15px;
 list-style:none;
 border:1px solid black;
 border-left:none;
 height:28px;
 line-height:2.25em;
}

#search {
 float:right;
 width:470px;
 height:30px;
}

#search_form {
 float:right;
}

.ActiveMenu {
 border:1px solid black !important;
 height:30px !important;
 margin-top:-2px;
 line-height:2.5em;
}

Заранее спасибо за советы.

AKS · June 11, 2007

...в IE не отображается как надо.

Попробуйте для .ActiveMenu добавить:

position:relative;

Ladoga · June 11, 2007

2AKS:

Помогло!!! Огромное спасибо!!!

Ladoga · June 12, 2007

Если не трудно, объясните, плиз, почему именно position:relative; исправило положение? Это как-то связано с наследованием?

Вот еще вопрос, только немножко не по теме поста: в этом же примере кнопка "найти" в FF отображается на одном уровне с полем ввода текста, а в IE верхний край кнопки выступает выше уровня поля. Как это можно исправить?

shkoda · August 13, 2007

а еще объясните, пожалуйста, каким образом нужному пункту указать класс .ActiveClass?

Sign In

frD-Выступающая закладка - проблема отображения в IE

Question

Ladoga

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

AKS

Link to comment

Share on other sites

Ladoga

Link to comment

Share on other sites

Ladoga

Link to comment

Share on other sites

shkoda

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information