Изменить цвет фона ячейки таблицы

**ptica** · 08.02.2007, 17:12

Здравствуйте.

Есть ячейка высотой 120px, внутри ссылка. Можно ли средствами css при наведении курсора на ссылку поменять цвет фона ячейки так, чтобы отображалось верно и в IE, и в Opera, и в Firefox?

Пробовал множество разных способов. Ни в одном не смог добиться корректной работы под вышеуказанными тремя броузерами. Последний вариант, который работает корректно в Opera и Firefox, но не работает в IE:

<html>
<head></head>
<style>
a.top_menu {
height: 60px;
padding-top: 60px;
padding-left: 10px;
display: block;
}
a.top_menu:hover {
background-color: #2586D7;
}
</style>
<body>
<table width="100%" height="120px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="green">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
<td bgcolor="green">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
</tr>
</table>

Спасибо.

**Aykroyd** · 08.02.2007, 17:32

Укажите для ссылки в CSS (отдельным правилом):

* html a.top_menu {height: 1%}

Тогда заработает и в IE.

**null** · 09.02.2007, 19:49

Код:

<html>
****<head>
****</head>
****<style>
****
****table.menu {
 *width * *: 100%;
 *height * *: 120px;
 *border-collapse *: collapse;
 *border-spacing *: 0;
 *
 *}
 *
****table.menu tr td {
 *border * *: none;
 *margin * *: 0;
 *padding * *: 0;
****
 *}
 *
****a.top_menu {
 *display * *: block;
 *height * *: 100%;
 *width * *: 100%;
 *background-color****: green;
 *font * *: 12px/120px Verdana, Geneva, Tahoma, Arial, sans-serif;
 *padding-left *: 10px;
 *
 *}

****a.top_menu:hover {
 *display * *: block;
 *background-color****: #2586D7;
 *
 *}
****
****</style>
****<body>
 *<table class="menu">
 *****<tr>
 * *<td>[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
 * *<td>[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
 *****</tr>
 *</table>
****</body>
</html>

ага

**Aykroyd** · 09.02.2007, 20:23

Originally posted by null@Feb 9 2007, 19:49
ага
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Не ага

Низя... Паддинг потому что у ссылки... Блочную модель игнорируем?

**Aykroyd** · 09.02.2007, 20:38

В принципе, если уж тема пошла, так как у автора высота <a> и так указана явно – 60px, ему достаточно будет лишь !DOCTYPE правильный указать... для решения проблемы в IE...

Например вот такой:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Дабы ввести этот безумный браузер в стандартный режим рендеринга...

**null** · 09.02.2007, 20:52

Aykroyd, не понял в чем проблема. объясните.
вроде все законно. и явно логичней, чем у аффтара. паддинги там у сцылки (60px = 0.5 x 120px), ИМХО, для того, чтобы разместить текст вертикально по центру.

**Aykroyd** · 10.02.2007, 07:35

Originally posted by null@Feb 9 2007, 20:52
Aykroyd, не понял в чем проблема. объясните.
вроде все законно. и явно логичней, чем у аффтара. паддинги там у сцылки (60px = 0.5 x 120px), ИМХО, для того, чтобы разместить текст вертикально по центру.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Насчет того, что логичней – это однозначно.
Конечно, нет никакого смысла задавать верхний паддиинг для ссылки для размещения текста по вертикальному центру. Также все законно. Но не совсем корректно...

Я ничуть не сомневаюсь в том, что Вам известно о блочной модели следующее:

width = width + paddings + borders +margins

Посмотрите представленный Вами код в FF и Опере.
Вы сразу же обнаружите, что таблица "уехала" вправо ровно на величину padding-left : 10px;, заданную для a.top_menu.

Нельзя задавать блокам в прямом потоке 100%-ную ширину в связке с правыми или левыми paddings, borders или margins. В противном случае их реальная ширина будет равна 100%+значение этих paddings, borders или margins... Как следствие – блоки "поедут"... Более того, в FF в данном конкретном случае даже появится горизонтальная полоса прокрутки...

А автору, видимо, все-таки нужен паддинг для ссылки (как минимум левый). Поэтому-то я и предложил хак для IE, а не width: 100% для всех браузеров...

**null** · 11.02.2007, 00:28

text-indent : 10px;

**Zigzag** · 11.02.2007, 14:16

Originally posted by Aykroyd@Feb 10 2007, 05:35
[b]width = width + paddings + borders +margins

width = width + paddings + borders !!!

**Aykroyd** · 11.02.2007, 19:01

Originally posted by null@Feb 11 2007, 00:28
text-indent : 10px;
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ну!

Padding, Border или Margin может потребоваться не только слева...

ага

**Aykroyd** · 11.02.2007, 19:19

Originally posted by Zigzag@Feb 11 2007, 14:16
width = width + paddings + borders !!!
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Почему нет смайла "перекреститься"?

Павел, ты заблуждаешься.
Лучший способ – это даже не поиск соответствующих статей.
Хотя... [Только зарегистрированные пользователи могут видеть ссылки. ]... (засада)

Просто проверь это на практике...

**Zigzag** · 11.02.2007, 22:30

ой, вправду, перепил я на свадьбе за 3 дня, всетаки входит =)

**ptica** · 12.02.2007, 17:38

Всем спасибо

.

**Aykroyd** · 13.02.2007, 04:20

Originally posted by ptica@Feb 12 2007, 17:38
Всем спасибо .
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не за что.
Заходите в гости.

Тема: Изменить цвет фона ячейки таблицы

Опции темы

Поиск по теме

Отображение

Похожие темы

Как изменить цвет фона второго блога в DW?

Порядок бордюров ячейки таблицы

Замена фона таблицы при наведение на ссылку в ней

Как изменить цвет, жирность цифер в списке?

Не могу изменить цвет ссылок!

Ваши права