Совместимая с браузером навигационная панель с закругленными углами и CSS

Question

Я работаю над браузер-совместимой навигационной панелью с закругленными углами, используя DIVs и округленные изображения.У меня он отлично работал в FireFox, только чтобы обнаружить, что IE его обрабатывает (конечно).

Единственная проблема, с которой я сейчас сталкиваюсь, - это растянуть содержимое моего DIV (navBody) в соответствии с высотойбоковые изображения.В обоих браузерах теперь у меня есть это:

http://img80.imageshack.us/img80/5088/40128898.jpg

<div class="navWrapper">
 <div class="navLeft"></div>
 <div class="navBody">
  <a href="/members">Login/Register</a>
 </div>
 <div class="navRight"></div>
</div>

.navRight
{
 float: left;
 width: 12px; 
 height: 25px; 
 background: url('/images/nav/tabright_off.png');
}

.navLeft
{
 float: left;
 width: 12px; 
 height: 25px; 
 margin-left: 3px;
 background: url('/images/nav/tableft_off.png');
}

.navBody
{
 float: left;
 background: #DDDDEE;
 white-space: nowrap;
 font: bold 12px Verdana, sans-serif;
 padding-top: 5px;
 overflow: hidden;
}

.navWrapper
{
 float: left; 
 height: 25px;
 display: inline;
}

Я пытался добавить 5px padding-bottom в navBody, но это работает только на FF, а не IE из-за проблем с моделью коробки,Установка navBody на фиксированную высоту (высота вкладок должна быть 20 пикселей), похоже, ничего не дает.Есть идеи?

Answer 1

Не уверен, почему добавление высоты 20 пикселей в CSS не работает (на navBody), это было бы мое первое предположение. Вместо этого вы можете попробовать сделать его height: 25px (для соответствия сторон), но затем измените line-height, чтобы вытолкнуть текст вниз (вместо padding-top).

Другой вариант (который изменит фактический дизайн вашей навигации) - установить width для всех элементов навигации. В целом, для двигателей рендеринга предпочтение отдается настройке width на любых плавающих элементах.

Answer 2

Обнаружена проблема - FireFox добавлял отступ (5 пикселей) к высоте 20 пикселей, которую я установил, чтобы получить в общей сложности 25 пикселей; IE не было, поэтому высота осталась на уровне 20 пикселей. Исправлено это, сделав высоту 25px по умолчанию и компенсировав в Firefox, обрезав переполнение в div оболочки.

Answer 3

Попробуйте добавить

<br style="clear:both" />

к нижней части navBody div и посмотрите, поможет ли это.