Xpoint
   [напомнить пароль]

Разъезжаются по высоте ячейки таблицы...

2002-05-19 01:05:36 [обр] Tanita [досье]

У меня есть таблица из трех колонок. В первой и третьей - навигация по сайту, во второй - сверху донизу текст. У таблицы также три строки - чтобы крупные разделы меню, состоящие из однотипных ссылок, были расположены каждый в своей ячейке/строке. В результате, все это выглядит так:

<body background="images/bg2.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="1">
<tr>
<td valign="top" align="center">
<br><br>
<p class="head">ЗАГОЛОВОК</p>
<table width="928" border="1" cellspacing="0" cellpadding="0">

<tr>
<td valign="top" width="200" height="40" class="active"><b>Главная страница</b></td>
<td rowspan="3" align="center" width="528">
<p class="head2">Еще один заголовок.</p>
<div class="abz">Длинный-длинный текст(примерно на 3 экрана)
</div></td>
<td valign="top" width="200" height="40"><a href="fotogallery.htm"><b>Фотогалерея</b></a></td>
</tr>

<tr>
<td valign="top" width="200" height="300"><b>Разделы сайта</b><br>
<a href="...">Раздел1</a><br>
<a href="...">Раздел2</a><br>
<a href="...">Раздел3</a><br>
<a href="...">Раздел4</a><br>
<a href="" onClick="MM_openBrWindow('map.htm','map','toolbar=yes,resizable=yes,width=250,height=600,top=20,left=750');return false"><b>Карта сайта</b></a>
</td>
<td valign="top" width="200" height="300"><b>Ссылки</b><br>
<a href="...">Первая ссылка<br></a>
<a href="...">Вторая ссылка<br></a>
<a href="...">Третья ссылка<br></a>
<a href="...">Четвертая ссылка<br></a>
</td>
</tr>

<tr>
<td valign="top" width="200"><b>Статьи и интервью</b><br>
<a href="...">Первая статья<br></a>
<a href="...">Вторая статья<br></a>
<a href="...">Интервью<br></a>
</td>
<td valign="top" width="200">
<b>Прочее</b><br>
<a href="">Прислать мнение</a><br>
<a href="">Еще что-нибудь...</a><br>
</td></tr>
</table>
</td></tr></table></body>

Вопрос: как сделать высоты ячеек в первом и третьем столбце такими, какими нужно (скажем, фиксированными)? У меня наблюдается вот что: IE(6.0) плюет на указанные высоты и делает их какими-то своими (у боковых ячеек в первой и второй строках они получаются гораздо больше, чем заданы). У меня сложилось впечатление, что IE растягивает ячейки как-то пропорционально той высоте, что я в них закладываю. Я пыталась указать для ячеек нижней строки height="100%", в надежде, что IE первые ячейки все-таки сделает той высоты, что я прошу, а все оставшееся свободное пространство "засунет" в ячейки нижней строки - никакого результата.
Самое обидное (и интересное), что Opera (5.12, 6.0) прекрасно понимает задаваемую высоту и соблюдает ее.
Я подозреваю, что я как-то неправильно, не по назначению использую атрибут ячейки height, подскажите, в чем здесь загвоздка?

спустя 5 часов [обр] VIG [досье]

Tanita:

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

Вашу конструкцию c rowspan Эксплорер растягивает пропорционально высоте контента в каждой строке, если его не хватает.

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

спустя 27 минут [обр] Tanita [досье]
VIG:
я не поняла эту фразу: "Вашу конструкцию c rowspan Эксплорер растягивает пропорционально высоте контента в каждой строке, если его не хватает."
спустя 23 минуты [обр] VIG [досье]
Точнее, хотя и намного более упрощенно, чем на самом деле:
  1. Рассчитывается высота каждой ячейки: она равна указанной, если контент со всеми полями и пр. влезает. Иначе - определяется контентом.
  1. Рассчитывается высота каждой строки как максимум высот ее ячеек.
  1. Работает алгоритм, окучивающий rowspan: если сумма рассчитанных высот строк, входящих в span меньше, чем у "высокой" ячейки, то строки пропорционально растягиваются ...
спустя 5 минут [обр] Tanita [досье]
Tanita: ясненько.
Хотя, на мой взгляд, неправильно (то есть, ИЕ поступает неправильно).
Ладно, будем иметь это в виду :)
спустя 21 минуту [обр] VIG [досье]

Tanita: IE поступает разумно, с некоторой точки зрения. И правильно, поскольку имеет на это право. Указание высот строк/ячеек - это только рекомендация.

Еще раз повторю свой совет из другого треда: рисуйте тестики :-) Например, для данного случая

<html>
<head>
<title>Rowspan</title>
<script>
function showHeights() {
    x.value =
        t.rows[0].cells[0].offsetHeight + ' ' +
        t.rows[1].cells[0].offsetHeight + ' ' +
        t.rows[0].cells[1].offsetHeight;
}
function addText() {
    t.rows[0].cells[0].innerHTML+='<br>0.0';
    showHeights();
}
</script>
</head>
<body onload="showHeights()">
<button onclick="addText()">Add Text to Cell</button><br>
<input type="text" id="x">
<table id="t" border="1">
<tr>
    <td height="20">0.0</td>
    <td rowspan="2" height="300">Rowspan 1.0 + 1.1</td>
</tr>
<tr>
    <td height="100">1.1</td>
</tr>
</table>
</body>
</html>

Окупится сторицей ... помимо всего прочего, это очень хороший способ нарабатывать технику ...

Powered by POEM™ Engine Copyright © 2002-2005