VPF::Firefox не воспринимает ширину дива

MickQuick

Дата 20.6.2008, 10:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 20.6.2008

Репутация: нет
Всего: нет

Доброго времени суток!

Люди, столкнулся с такой проблемой. делаю горизонтальную менюшку. В которой при наведении на ссылку должен менять background не только ссылки, но и всей ячейки (да, ссылки лежат в дивах, а дивы в ячейках таблицы). Все нормально в IE(при наведении курсора вся ячейка заполняется картинкой), но в FireFox-е возникает такая проблема. Ширина картики background-а не привышает ширины сслыки, т.е. НЕ на всю ячейку. Уже искал решение проблемы в инете, лазил по форумам, но не нашел. Понял только что файрфокс покатывает так, как сверстал, а IE хоть и показывает хорошо, но не есть на самом деле правильно. Люди подскажите, в чем моя ошибка и как сделать чтоб на всю ячейку background распалзался.

Код следующий.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Страница</title>
<style type="text/css">
.tablemenudiv a{
  text-decoration: none;
    text-align:center;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #661100;
  font-weight: bold;
  padding-top:15px;
   width:100%;   
  height:47px;
}

.tablemenudiv a:hover{
  background:url(line_menu_active.jpg) repeat-x;
  text-decoration: none;
    text-align:center;
  /* width:138px; */
   width:100%;  
  height:47px;
  padding-top:15px;
  padding-bottom:15px; 
}
</style>
</head>
<body>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="middle">
          <td>
            <img src="delimiter_menu_items.jpg" class="delim_img" width="2" alt="" border="0">
          </td>
          <td align="center">
    <div class="tablemenudiv">
            <a href="production/" class="tmenu">Продукция</a>
    </div>
          </td>
          <td>
            <img src="delimiter_menu_items.jpg" width="2" alt="" border="0">
          </td>
          <td align="center">
    <div class="tablemenudiv">
            <a href="service/" class="tmenu">Услуги</a>
    </div>
          </td>
          <td>
            <img src="delimiter_menu_items.jpg" width="2" alt="" border="0">
          </td>
          <td align="center">
    <div class="tablemenudiv">
         <a href="address/" class="tmenu">Контакты</a>
    </div>
          </td>
          <td>
            <img src="delimiter_menu_items.jpg" width="2" alt="" border="0">
          </td>
          <td align="center">
    <div class="tablemenudiv">
            <a href="zakaz/" class="tmenu"><nobr>Заказать</nobr></a>
    </div>
          </td>
          <td>
            <img src="delimiter_menu_items.jpg" width="2" alt="" border="0">
          </td>
          <td align="center">
    <div class="tablemenudiv">
            <a href="manual/" class="tmenu">Справочник</a>
    </div>
          </td>
          <td>
            <img src="delimiter_menu_items.jpg" class="delim_img" width="2" alt="" border="0">
          </td>
        </tr>
      </table>
</body>
</html>

webster

Дата 21.6.2008, 07:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

В таком случае зачем вам лишние div для разметки, достаточно объявить ваши теги <a> элементами уровня блока (display: block;) отцентрировать текст по вертикали, задав line-height равный высоте <a>, все расмеры, и высота и ширина у вас уже для <a> заданы.

MickQuick

Дата 23.6.2008, 10:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 20.6.2008

Репутация: нет
Всего: нет

webster, Большое спасибо! Сделал как вы сказали и в FF выглядит вообще все идеально smile

. Вот только в IE чуток косяк. почему то бэкграундная картинка в ячейке чуток вниз сползла. хотя хотя если не приглядываться, то нормально ;)

bars80080

Дата 24.6.2008, 14:42 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

если нужно подправить что-то конкретно в ИЕ, то напишите что-нибудь в таком духе:

Код

* html .tablemenudiv a:hover { background-position: 0px -1px; }

MickQuick

Дата 25.6.2008, 11:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 20.6.2008

Репутация: нет
Всего: нет

bars80080, Спасибо! Буду иметь ввиду.
Еще раз всем спасибо, оч. помогли. была просто стена непробиваемая.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »