Помогите советом по верстке, плиз

Доброго времени, ув. форумчане.
Проблема в следующем, в FF (ну как обычно ) все в порядке, а в остальных - высота ячейки (хотя указана в цсс 30 пикс) почему-то вытягивается.
Код:


HTML
<table class="list-apartment" cellspacing="0" cellpadding="0" border="0">
<tr>
<th class="foto">
Изображение
</th>
<th class="name">
Название
</th>
<th class="country">
Страна
</th>
<th class="short-description">
Краткое описание
</th>
<th class="category">
Категория
</th>
</tr>
<!-- четная строка (серый фон у ячеек) -->
<tr class="even">
<td class="foto" rowspan="2">
<a href="#"><img src="media/images/fotosmall.jpg" alt="" /></a>
<p><a href="#">Подробно&raquo;</a> / <a href="#">Карта&raquo;</a></p>
</td>
<td class="name" rowspan="2">
<a href="#"><b>Luxury Apartment by River Thames (Zone 1, Central London)</b></a>
<p>Число комнат: 3<br />
Число спален: 2<br />
Человек минимум: 4<br />
Человек максимум: 8<br />
Жилая площадь: 90</p>
</td>
<td class="country">
<p>United Kingdom</p>
</td>
<td class="short-description">
<p>Not</p>
</td>
<td class="category">
<p>Not</p>
</td>
</tr>
<tr class="even">
<td colspan="3" class="icons">
<img src="media/images/sobak.png" alt="" />
<img src="media/images/nosmoke.png" alt="" />

<a class="to-reserve" href="#">Забронировать</a>
</td>
</tr>
<!-- конец четной строки (серый фон у ячеек) -->
</table>

CSS

.list-apartment {
width:100%;
margin-bottom:15px;
border-collapse:collapse;
}

.list-apartment th {
padding-left:10px;
padding-right:10px;
height:14px;
padding-top:8px;
padding-bottom:7px;
font-size: 12px;
font-weight:bold;
letter-spacing:0px;
line-height: 14px;
color:#333333;
text-align:left;
background-color:#f6f6f6;
border:#dddddd 1px solid;
}

.list-apartment td {
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
text-align:left;
border:#dddddd 1px solid;
}

.list-apartment .foto {
width:103px;
}

.list-apartment .country, .list-apartment .short-description {
width:20%;
}

.list-apartment .category {
width:15%;
}

.list-apartment td p {
font-size: 11px;
font-weight:normal;
letter-spacing:0px;
line-height: 14px;
color:#7a7a7a;
margin-top:4px;
margin-bottom:4px;
}

.list-apartment a {
color:#90191c;
}

.list-apartment .foto p {
margin-top:15px;
}

.list-apartment .foto img {
color:#dddddd;
margin-top:3px;
}

.list-apartment .icons {
padding:0px;
height:30px;
vertical-align:middle;
line-height:0px;
padding-left:1px;
padding-right:10px;
padding-top:2px;
padding-bottom:2px;
}

.list-apartment .icons img {
margin-left:1px;
margin-right:1px;
float:left;
}

Вот так должно быть по задумке (и так отображается в FF)

ссылка

А вот так в других браузерах (именно это - Chrome)

ссылка

Вопрос: у кого какие идеи как лечить? Чепуху типа "отвыкайте от табличной верстки" т.д. - писать не нужно.

P.S. Посмотреть подробнее можно тут ссылка

.list-apartment .country, .list-apartment .short-description {
width:20%;
height:100%;
}

Пробовали?
Выложите лучше саму верстку где-то, чтоб в динамике посмотреть.

floppox, верстка в динамике тут ссылка

Цитата ("floppox"):

.list-apartment .country, .list-apartment .short-description {
width:20%;
height:100%;
}

пробовал, еще хуже - тогда даже в FF высота ломается.

Прописать для тех трех ячеек height:70px вам не подходит?

Нет, не походит т.к. высота левых двух может быть как меньше так и больше. Поэтому должны тянуться три правых верхних, а нижняя - фикс высоты.

Мдя... Вы уж простите, но сегодня нет возможности копаться.
Таблицы - конечно, занимательный момент в верстке.

В том то и дело - задача вроде и тривиальная, а тут такой косяк! :P

Попробуйте к каждой ячейке

<td style="max-width: 70px !important">...</td>

а лучше переверстать чем искать что не так

temaR, во первых причем здесь width к высоте, во-вторых - я уже писал выше - мне нужно чтобы верхние ячейки тянулись, а не фикс высотой в 70 пикс, в-третьих - при чем здесь переверстать, я ведь не говорю, что что-то не так, просто кто знает как побороть такое поведение браузеров ? Или вы знаете рецепт как переверстать чтобы данного косяка не было?

TitokR, вот, сходу, совет - найдите для себя человеческий reset и попробуйте взглянуть на то, что сделали, вместе с ним. Потому что, иногда, стили по-умолчанию творят чудеса подобные тем, что у вас в верстке.

loyanich, ок. А какой по вашему ресет считается человеческим?

TitokR, вот такой, например
ссылка
но это кому-как, некоторые на него жалуются и ищут другие варианты.

loyanich, ничего не изменилось. Я уже убрал все лишние стили из цсс файла, оставил только стили отвечающие за отрисовку таблицы и ресет. ссылка
Получается дело не в ресете.

TitokR, ну совет все равно даром не пропадет, хорошо хоть марджины и паддинги привели к общему знаменателю, уже что-то.
А насчет того, что дело не в ресете - это да, там еще есть проблемы, но я дальше помочь не смогу. Мне, например, религия не позволяет параграф внутрь ячейки пихать, поэтому я такую верстку быстро исправить не в силах.

loyanich, а что у вас за религия такая? Я такого еще не слышал чтобы параграф нельзя было пихать в ячейку... А див можно? А чем они отличаются? Валидатор не ругается - значит правилам не противоречит. Но чтобы уж точно снять подозрение с параграфов, вот вам верстка без параграфов ссылка только таблица с текстом и изображениями. А по поводу маргинов и паддингов - у меня изначально в начале цсс была конструкция * {margin:0; padding:0} так что отступы были сброшены.
Цитата ("loyanich"):

поэтому я такую верстку быстро исправить не в силах.

И вопрос не в том чтобы исправить, а в том почему браузеры ведут себя так нелогично? И есть ли какой нибудь рецепт как это побороть.

В таблицах много нелогичностей.
Надо плясать от упрощенного. Сперва таблицу из двух строкоячеек. Добиться соотношения высот, дальше наращивать. Как поползет - поймете в чем причина, может, и решение придет.

Цитата ("TitokR"):

И вопрос не в том чтобы исправить, а в том почему браузеры ведут себя так нелогично? И есть ли какой нибудь рецепт как это побороть.

на вскидку:
я бы в стиле ячейки указал только высоту, а padding-и и margin-ы задавал для внутреннего блока. Т.е. внутрь блок с "clear:both;", тоже высотой и всеми отступами, а в него уже img.

TitokR, меня, наверное, расстреляют за оверквотинг, но я попробую
Цитата ("TitokR"):

loyanich, а что у вас за религия такая? Я такого еще не слышал чтобы параграф нельзя было пихать в ячейку...

Это малораспространенная религия.

Цитата ("TitokR"):

А див можно?

Можно

Цитата ("TitokR"):

А чем они отличаются?

Они по-разному описывают элементы дизайна. Вы, верстая, забываете, что задача веб-версталы не только попиксельно совместить то, что, в вашем случае, "налепил" дизайнер, но и описываете элементы документа.

Цитата ("TitokR"):

Валидатор не ругается - значит правилам не противоречит. Но чтобы уж точно снять подозрение с параграфов, вот вам верстка без параграфов ссылка только таблица с текстом и изображениями. А по поводу маргинов и паддингов - у меня изначально в начале цсс была конструкция * {margin:0; padding:0} так что отступы были сброшены.

Типичная ошибка людей, решающих задачи, в том, что они думают, что все думают так же, как думают они. Для того, чтобы правильно пользоваться валидатором, надо знать что и зачем мы валидируем. Ну и насчет "* {margin:0; padding:0}" - я тут наверно вас удивлю. Попробуйте, даже с ресетом, взглянуть на стили параграфа в, скажем, Хромиуме. Он же, собака, все равно лепит какие-то свои "-webkit-margin" и прочее. Но это не главное в ваших терзаниях. А главное вот что

Цитата ("TitokR"):

И вопрос не в том чтобы исправить, а в том почему браузеры ведут себя так нелогично? И есть ли какой нибудь рецепт как это побороть.

Вопрос именно в том, чтобы исправить. Потому что странное поведение webkit при rowspan известно и, чтобы добиться нужного вашему дизайнеру эффекта, надо верстку исправлять. Или ставить костыли, что тоже своего рода исправления.

rech, сделал, эффект тот же. floppox, упростил до минимума, когда в таблице только правая часть (без левых ячеек с rowspan) все ок, но когда появляется rowspan - все едет. Еще заметил такой момент - когда в левой ячейке с rowspan текста мало, тоже все ок ссылка , но когда заполняется ячейка, то она тянет за собой вверх мою фикс ячейку ссылка . В общем если у кого есть еще идеи как это победить (пусть даже самые безумные) - пишите. Неужели никто с таким не сталкивался?

loyanich, много букв, а толку ноль. Вот что вы конкретно посоветовали? Убрать параграфы? Так я убрал. Но ничего не изменилось. Так что пожалуйста, всем кто пишет - давайте как-то конкретнее, а то получается "я такой умный - знаю (или думаю что знаю) что у тебя не правильно, а как правильно не скажу". Цитата ("loyanich"):

Вопрос именно в том, чтобы исправить. Потому что странное поведение webkit при rowspan известно и, чтобы добиться нужного вашему дизайнеру эффекта, надо верстку исправлять

- что исправить?