Studio AD : Проблема с IE - Форум Studio AD

Страница 1 из 1
1

Проблема с IE

ZheKA

Дата: Понедельник, 31.05.2010, 12:08 | Сообщение # 1

молчун

Группа: Проверенные

Пользователь №: 89

Сообщений: 38

Получено оценок: 4

Карма: 5

Замечания: 0%

В общем появилась проблема с табличной версткой в IE.

Имеется код таблицы:

Code

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="54" class="menu1">Главное меню</td>
    </tr>
    <tr>
      <td class="menuBody">Это меню</td>
    </tr>
</table>

CSS:

Code

.menuBody {background-image:url(../img/menu_body2.jpg);background-color:#bfaa71;padding:5px;}
.menu1 {background-color:#887b56;background-image:url(../img/menu_up2.jpg);font-size:16px;font-weight:bold;color:#d8c06a;padding-left:30px;padding-top:8px;background-repeat:no-repeat;}

И вот как выглядит это в IE

И как в остальных браузерах

То есть в IE под заголовком появляется некоторое пространство, как от него избавится в IE? И главное если я убираю с страницы DOCTYPE, то в IE начинает отображаться всё правильно O_o

Использую DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Надеюсь вы поможете в мой проблеме

Сообщение отредактировал ZheKA - Понедельник, 31.05.2010, 12:10

Aleko

Дата: Понедельник, 31.05.2010, 16:31 | Сообщение # 2

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

В ie есть баг когда паддинг перестает складываться с величинами элемента. В твоем случае это: нормбраузеры: высота 54 в ТОМ ЧИСЛЕ 8 на отступ, IE высота 54 + 8 на отступ. Есть два самых очевидных решения. Первое - с помощью хаков убрать отступ в IE и второе, не использовать отступ вообще а вместо него использовать внутренний элемент и уже к нему приделывать отступ. Я обычно пользуюсь вторым способом и использую span.

Бесплатные обои.

ZheKA

Дата: Понедельник, 31.05.2010, 17:54 | Сообщение # 3

молчун

Группа: Проверенные

Пользователь №: 89

Сообщений: 38

Получено оценок: 4

Карма: 5

Замечания: 0%

Попробовал сделать вторым способом с помощью тега span

Code

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td height="50" valign="middle" class="menu2"><span class="toptext">Главное меню</span></td>
   </tr>
   <tr>
     <td class="menuBody">Меню
     </td>
   </tr>
</table>

CSS:

Code

.menu2 {background-color:#887b56;background-image:url(../img/menu_up3.jpg);font-size:16px;font-weight:bold;color:#d8c06a;background-repeat: repeat-y;}
.toptext {padding-left:9px; padding-top:8px;}

Но заголовок делает отступ слева, а сверху не в какую