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

height+border у td

Метки: [без меток]
2009-01-27 05:31:15 [обр] Horzer[досье]

Проблема в том, что Firefox 3 считает высоту ячейки включая border, а IE7 - height+border

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
table.t1 {
   border-collapse:collapse;
}

table.t1 td {
   background-color: #CCCCCC;
   height: 30px;
   border-bottom: solid 1px #000;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="t1">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Высота таблицы в IE и Mozilla в итоге расходится. Можно ли это решить доктайпами или для разных браузеров надо обязательно делать разные css?

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

Спасибо за внимание

спустя 7 часов [обр] Horzer[досье]
В Интернет::HTML-верстка::Особенности браузеров надо было...
спустя 1 час 45 минут [обр] Алексей В. Иванов(95/2861)[досье]
М Перенесено из форума "Интернет::Стандарты"
спустя 11 часов [обр] Marat Tanalin(10/78)[досье]
Для начала откажитесь от border-collapse — у Firefox с ним неоднозначности.
спустя 8 дней [обр] Horzer[досье]
Нет совсем идей?
спустя 7 дней [обр] Marat Tanalin(10/78)[досье]

Строго говоря, если приходится задавать высоту в пикселах для ячеек таблиц, значит, скорее всего, что-то не так. Например, таблица используется не для табличных данных. Для реальных данных достаточно использовать padding, а вместо border-collapse задавать рамки ячеек так:

TABLE,
TABLE TD,
TABLE TH {border: solid #ccc; }

TABLE {border-spacing: 0; border-width: 1px 0 0 1px; }

TABLE TD,
TABLE TH {border-width: 0 1px 1px 0; }

Для имитации нулевого border-spacing в IE6/7 можно воспользоваться border-collapse: collapse, спрятав его от нормальных браузеров условными комментариями.

Powered by POEM™ Engine Copyright © 2002-2005