специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-5

td#two { background: green; width: 70%; }

td#three { background: blue; width: 30%; }

HTML:

ЛИСТИНГ

<table>

<tr>

<td id="one">one</td>

<td id="two">two</td>

<td id="three">three</td>

</tr>

</table>

Во всех трех браузерах ширина первой ячейки игнорируется, так как ужимается соседними колонками. Можно, конечно, поставить распорку, но мы ведь стремимся к минимализму в HTML. Тем более, в запасе есть шикарное свойство CSS table-layout:

ЛИСТИНГ

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

Что за чертовщина? В Mozilla и Opera ширина первой колонки увеличилась на размер полей и составила 120px. Попробуем применить свойство box-sizing:

ЛИСТИНГ

td { box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; }

Этот баг присутствует во всех трех браузерах. В IE его можно побороть, выставив table-layout: fixed; (что мы и сделали чуть выше). В Mozilla и Opera для этой цели необходимо задать ширину ячейки в элементе col, при этом убрав ее из определения td.

CSS:

ЛИСТИНГ

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

col#c_one { width: 100px; }

col#c_two { width: 70%; }

col#c_three { width: 30%; }

td { padding: 10px; }

td#one { background: red; }

td#two { background: green; }

td#three { background: blue; }

HTML:

ЛИСТИНГ

<table>

<col id="c_one" />

<col id="c_two" />

<col id="c_three" />

<tr>

<td id="one">one</td>

<td id="two">two</td>

<td id="three">three</td>

</tr>

</table>

В Opera первая колонка все-таки шире установленного значения на пару пикселей. Виновник — необнуленный HTML-атрибут cellpadding. Причем выставление padding: 0 в CSS для всех ячеек не решает проблемы.

CSS:

ЛИСТИНГ

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

col#c_one { width: 100px; }

col#c_two { width: 70%; }

col#c_three { width: 30%; }

td { padding: 10px; }

td#one { background: red; }

td#two { background: green; }

td#three { background: blue; }

HTML:

ЛИСТИНГ

<table cellpadding="0">

<col id="c_one" />

<col id="c_two" />

<col id="c_three" />

<tr>

<td id="one">one</td>

<td id="two">two</td>

<td id="three">three</td>

</tr>

</table>

Примечание: мы рассматриваем Internet Explorer 6 в Quirks mode. Если же у тебя указан DOCTYPE, приводящий IE в Standards compliance mode, то необходимо остановиться на варианте:

ЛИСТИНГ

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

Но при этом тебе нужно учесть W3C box model и в CSS указать td#one { background: red; width: 80px; }, а не td#one { background: red; width: 100px; }.

[задача.]

Создать вертикальное меню, меняющееся при наведении. Причем только свойствами CSS.

[решение.]

HTML:

ЛИСТИНГ

<div id=”menu”>

<ul>

<li><a title="Link 1" href="#1">Link 1</a></li>

<li><a title="Link 2" href=" #2">Link 2</a></li>

<li><a title="Link 3" href=" #3">Link 3</a></li>