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

Вид для печати

08.02.2007, 17:12
ptica

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

Есть ячейка высотой 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">[Only registered and activated users can see links. Click Here To Register...]</td>
<td bgcolor="green">[Only registered and activated users can see links. Click Here To Register...]</td>
</tr>
</table>

Спасибо.
08.02.2007, 17:32
Aykroyd

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

* html a.top_menu {height: 1%}

Тогда заработает и в IE.
09.02.2007, 19:49
null

Код:

<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>[Only registered and activated users can see links. Click Here To Register...]</td> * *<td>[Only registered and activated users can see links. Click Here To Register...]</td> *****</tr> *</table> ****</body> </html>

ага [Only registered and activated users can see links. Click Here To Register...]
09.02.2007, 20:23
Aykroyd

Цитата:

Originally posted by null@Feb 9 2007, 19:49
ага [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

Не ага [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...]

Низя... Паддинг потому что у ссылки... Блочную модель игнорируем? [Only registered and activated users can see links. Click Here To Register...]
09.02.2007, 20:38
Aykroyd

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

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

Код:

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

Дабы ввести этот безумный браузер в стандартный режим рендеринга...
09.02.2007, 20:52
null

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

Цитата:

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

[/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% для всех браузеров...
11.02.2007, 00:28
null

text-indent : 10px;
11.02.2007, 14:16
Zigzag

Цитата:

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

width = width + paddings + borders !!!
11.02.2007, 19:01
Aykroyd

Цитата:

Originally posted by null@Feb 11 2007, 00:28
text-indent : 10px;
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Ну! [Only registered and activated users can see links. Click Here To Register...]

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

ага [Only registered and activated users can see links. Click Here To Register...]
11.02.2007, 19:19
Aykroyd

Цитата:

Originally posted by Zigzag@Feb 11 2007, 14:16
width = width + paddings + borders !!!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Почему нет смайла "перекреститься"? [Only registered and activated users can see links. Click Here To Register...]

Павел, ты заблуждаешься.
Лучший способ – это даже не поиск соответствующих статей.
Хотя... [Only registered and activated users can see links. Click Here To Register...]... (засада)

Просто проверь это на практике... [Only registered and activated users can see links. Click Here To Register...]
11.02.2007, 22:30
Zigzag

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

Всем спасибо [Only registered and activated users can see links. Click Here To Register...].
13.02.2007, 04:20
Aykroyd

Цитата:

Originally posted by ptica@Feb 12 2007, 17:38
Всем спасибо [Only registered and activated users can see links. Click Here To Register...].
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Не за что.
Заходите в гости. [Only registered and activated users can see links. Click Here To Register...]