Высота столбцов HTML-таблицы; Работает в Firefox не в IE
У меня есть HTML-код, который отлично отображается в FireFox3 / Opera / Safari, но не в IE7. Фрагмент выглядит следующим образом:
<!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></head>
<body bgcolor = "#AA5566" >
<table width = "100%">
<tr>
<td height = "37" valign = "top"><img style = "float:right;" border = "0" src = "foo.png" width = "37" height = "37"/></td>
<td width = "600" rowspan = "2" >
<table width = "600" height = "800"><tr><td><img src = "bar.jpg" width = "600" height = "800"/></td></tr></table>
</td>
<td height = "37" valign = "top"><img style = "float:left;" border = "0" src = "foo.png" width = "37" height = "37"/></td>
</tr>
<!-- This row doesnt fill the vertical space on IE7 //-->
<tr>
<td valign = "top" bgcolor = "#112233"> </td>
<td valign = "top" bgcolor = "#112233"> </td>
</tr>
</table>
</body>
Вторая строка не будет правильно заполнять вертикальное пространство, созданное средним столбцом первых строк (обратите внимание на rowspan = "2"). Вместо этого первые строки 1-го и 3-го столбцов расширяются вниз, хотя я установил их высоту на 37. На изображении ниже показано, что происходит в IE7 и Firefox3 ...
Обновлено: добавлен тип документа HTML во фрагмент кода. Добавил скриншот.
Любая помощь приветствуется, спасибо :)
Крис: только что добавил его во фрагмент кода.
Ответы 4
Я не совсем понимаю, почему это происходит. Какого макета вы пытаетесь достичь, действительно ли это должен быть стол? Не следует размещать страницы с таблицами, их следует использовать только для настоящих табличных данных.
Вы рассматривали возможность использования div?
Я добавил снимок экрана, чтобы объяснить это. Да, мне, вероятно, следует использовать DIV, но я бы предпочел не переписывать его, если я могу просто исправить эту ошибку.
Пропустите его через валидатор, и я уверен, что вы подойдете немного ближе.
На самом деле - то, что вы видите, является нормальным поведением IE: добавьте border = "1" в вашу основную таблицу, и она покажет вам, что происходит, немного яснее.
Правильный ответ: не создавайте макет страницы с помощью таблиц.
Технический ответ будет таков: ваши ячейки таблицы делают то, что должны делать, то есть вы не можете решить свою проблему с помощью структуры кода, которую вы используете.
Хакерский ответ будет: если ячейки слева и справа должны быть ровно 37 пикселей в высоту, вам придется добавить две дополнительные вложенные таблицы в левую и правую ячейку.
Что, если вы попробуете вот так:
<!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></head>
<body bgcolor = "#AA5566" >
<table width = "100%" border='1'>
<tr>
<td valign = "top">
<table bgcolor = "#112233" height = "37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
<td width = "600" rowspan = "2" >
<table width = "600" height = "800"><tr><td>asdf</td></tr></table>
</td>
<td valign = "top">
<table bgcolor = "#112233" height = "37" width='100%'><tr><td>asdf</td></tr></table><br />
Other content
</td>
</tr>
</table>
</body>
Декларацию какого документа вы используете?