Colunas de tabela HTML altura; Funciona no firefox não no ie

StackOverflow https://stackoverflow.com/questions/250931

Pergunta

Eu tenho algum HTML que exibe bom no Firefox3/Opera/Safari, mas não com o IE7. O trecho é o seguinte:

<!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>

A segunda linha não preencherá o espaço vertical criado pela coluna do meio das primeiras linhas (observe o lobo de linha = "2") corretamente. Em vez disso, as primeiras linhas 1º e 3º colunas se expandem para baixo, apesar de eu definir a altura deles para 37. A imagem abaixo mostra o que acontece no IE7 e no Firefox3 ...

alt text

Editar: Adicionado o tipo HTML Doc ao snippit de código. Adicionou uma captura de tela.

Qualquer ajuda apreciada, obrigado :)

Foi útil?

Solução

E se você tentar assim:

<!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>

Outras dicas

A resposta certa seria: não layout sua página usando tabelas.

A resposta técnica seria: suas células de tabela estão fazendo o que elas devem fazer, ou seja, você não pode resolver seu problema com a estrutura de código que você usa.

A resposta hacky seria: ter as células à esquerda e direita para ter exatamente 37px de altura, você precisará adicionar 2 tabelas aninhadas adicionais na célula esquerda e direita.

Não sei ao certo por que isso está acontecendo. Que layout você está tentando alcançar, ele realmente precisa ser uma tabela? Você não deve fazer layout páginas com tabelas, elas devem ser usadas apenas para dados tabulares verdadeiros.

Você já pensou em usar o divs?

Jogue através de um validador E tenho certeza que você vai se aproximar um pouco.

Na verdade - o que você está vendo é um comportamento normal para o IE: adicione borda = "1" à sua tabela principal e mostrará o que está acontecendo um pouco mais claro.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top