Высота столбцов HTML-таблицы; Работает в Firefox не в IE - PullRequest
Новая
       12

Высота столбцов HTML-таблицы; Работает в Firefox не в IE

0 голосов
/ 30 октября 2008

У меня есть некоторый 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">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
      </tr>

    </table>
    </body>

Вторая строка не будет заполнять вертикальное пространство, созданное средним столбцом первых строк (обратите внимание на rowspan = "2"), правильно. Вместо этого первые строки 1-го и 3-го столбцов расширяются вниз, хотя я установил их высоту 37. На рисунке ниже показано, что происходит в IE7 и Firefox3 ...

alt text

РЕДАКТИРОВАТЬ: добавлен тип документа HTML в фрагмент кода. Добавлен скриншот.

Любая помощь приветствуется, спасибо:)

Ответы [ 4 ]

3 голосов
/ 30 октября 2008

Правильный ответ будет: не размещайте свою страницу, используя таблицы.

Технический ответ будет таким: ячейки таблицы делают то, что они должны делать, т. Е. Вы не можете решить свою проблему с помощью используемой вами структуры кода.

Хакерский ответ будет таким: если ячейки слева и справа будут высотой ровно 37 пикселей, вам придется добавить 2 дополнительные вложенные таблицы в левую и правую ячейку.

2 голосов
/ 30 октября 2008

Что если вы попробуете это так: 

<!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>
0 голосов
/ 30 октября 2008

Бросьте его через валидатор , и я уверен, что вы немного приблизитесь.

На самом деле - то, что вы видите, является нормальным поведением для IE: добавьте border = "1" к вашей основной таблице, и оно покажет вам, что происходит немного яснее.

0 голосов
/ 30 октября 2008

Я не совсем уверен, почему это происходит. Какой макет вы пытаетесь достичь, действительно ли это должен быть стол? Не следует размещать страницы с таблицами, они должны использоваться только для настоящих табличных данных.

Рассматривали ли вы использовать div?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...