HTML Tabellenspalten Höhe; Funktioniert in Firefox nicht in IE

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

Frage

Ich habe einige HTML, die auf FireFox3 / Opera / Safari fein zeigt aber nicht mit IE7. Das Snippet ist wie folgt: 

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

Die zweite Reihe wird nicht den vertikalen Abstand von der ersten Reihen mittleren Spalte erstellt füllen (man beachte die rowspan = „2“) korrekt. Statt die ersten Reihen 1. und 3. Spalten erweitern nach unten, obwohl ich ihre Höhe auf 37. Das Bild unten zeigt, was in IE7 und Firefox3 passiert ...

alt text

EDIT: hinzugefügt, um den HTML-doc-Typ auf den Code snippit. Hinzugefügt einen Screenshot.

Jede Hilfe dankbar, danke:)

War es hilfreich?

Lösung

Was passiert, wenn Sie versuchen, es wie folgt aus: 

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

Andere Tipps

Die richtige Antwort wäre: Sie Layout nicht Ihre Seite Tabellen mit

.

Die technische Antwort wäre: Ihre Tabellenzellen tun, was sie tun sollen, das heißt Sie das Problem nicht mit der Codestruktur lösen können Sie

.

Die Hacky Antwort wäre:. Auf der linken und rechten, die Zellen mit genau 37px hoch zu sein, werden Sie zwei weitere verschachtelte Tabellen in der linken und rechten Zelle hinzuzufügen haben

Ich bin mir nicht ganz sicher, warum das geschieht. Welches Layout sind Sie zu erreichen versuchen, braucht es wirklich ein Tisch zu sein? Sie sollten nicht Layoutseiten mit Tabellen, sollten sie nur für echte tabellarische Daten verwendet werden.

Haben Sie darüber nachgedacht, divs mit?

Werfen Sie es durch einen Validator und ich bin sicher, dass Sie ein wenig näher kommen.

Eigentlich - was Sie sehen, ist normal behavour für IE: border = „1“ zu Ihrem Haupt-Tabelle hinzufügen und es wird Ihnen zeigen, was ein wenig klarer passiert

.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top