Altezza delle colonne della tabella HTML; Funziona in Firefox non in IE

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

Domanda

Ho un po 'di HTML che viene visualizzato bene su FireFox3 / Opera / Safari ma non con IE7. Lo snippet è il seguente: 

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

La seconda riga non riempirà correttamente lo spazio verticale creato dalla colonna centrale delle prime righe (notate il file di righe = "2") correttamente. Invece le prime righe 1a e 3a colonna si espandono verso il basso anche se ho impostato la loro altezza su 37. L'immagine sotto mostra cosa succede in IE7 e Firefox3 ...

alt text

EDIT: aggiunto il tipo di documento HTML allo snippit di codice. Aggiunto uno screenshot.

Qualsiasi aiuto apprezzato, grazie :)

È stato utile?

Soluzione

Che cosa succede se lo provi in ??questo modo: 

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

Altri suggerimenti

La risposta giusta sarebbe: non impaginare la tua pagina usando le tabelle.

La risposta tecnica sarebbe: le celle della tua tabella stanno facendo quello che dovrebbero fare, cioè non puoi risolvere il tuo problema con la struttura del codice che usi.

La risposta hacky sarebbe: avendo le celle a sinistra e a destra per essere esattamente alte 37px, dovrai aggiungere 2 tabelle nidificate aggiuntive nella cella sinistra e destra.

Non sono del tutto sicuro del perché stia accadendo. Quale layout stai cercando di ottenere, deve davvero essere un tavolo? Non dovresti impaginare le pagine con le tabelle, dovrebbero essere usate solo per veri dati tabulari.

Hai preso in considerazione l'utilizzo di div?

Lancialo attraverso un validatore e sono sicuro che ti avvicinerai un po '.

In realtà, quello che vedi è un comportamento normale per IE: aggiungi border = " 1 " al tuo tavolo principale e ti mostrerà cosa sta succedendo un po 'più chiaro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top