HTML Tabelle Spalten Höhe; Funktioniert in Firefox nicht im IE

Habe ich einige HTML, die gut zeigt auf FireFox3/Opera/Safari, 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 Zeile nicht füllen Sie den vertikalen Raum geschaffen wird, indem die ersten Zeilen der mittleren Spalte (beachten Sie die rowspan="2") korrekt. Statt der ersten Zeilen 1. und 3. Spalten erweitern nach unten, obwohl ich die Höhe an 37. Das Bild unten zeigt, was passiert im IE7 und Firefox3...

EDIT: Hinzugefügt den HTML-doc-type an den code snippit. Hinzugefügt einen screenshot.

Jede Hilfe dankbar, vielen Dank 🙂

Was für ein Dokument-Deklaration verwenden Sie?
Chris: nur Hinzugefügt, um den code snippit.

InformationsquelleAutor QAZ | 2008-10-30

Was ist, wenn Sie versuchen es 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%" 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>

InformationsquelleAutor Eli

3

Die richtige Antwort wäre: nicht das layout Ihrer Seite mit Hilfe von Tabellen.

Die technische Antwort wäre: Ihre Zellen sind zu tun, was Sie tun sollen, d.h. Sie kann nicht lösen Ihr problem mit der code-Struktur, die Sie verwenden.

Den hacky Antwort wäre: nachdem die Zellen auf der linken und rechten um genau zu sein 37px hoch, müssen Sie 2 weitere verschachtelte Tabellen in der linken und rechten Zelle.

InformationsquelleAutor postback
0

Ich bin mir nicht ganz sicher, warum das passiert ist. Was layout sind Sie versuchen zu erreichen, macht es wirklich brauchen, um eine Tabelle? Sollten Sie nicht das layout der Seiten mit Tabellen, Sie sollten nur verwendet werden, für echte tabellarische Daten.

Haben Sie als divs?
- Ich habe ein screenshot helfen, zu erklären, es. Ja, wahrscheinlich sollte ich mit DIV ' s, aber ich würde es vorziehen, nicht zu haben, um zu umschreiben, dass es, wenn ich einfach diese Fehler behoben.
InformationsquelleAutor Andrew Bullock
0

Werfen es über eine validator und ich bin sicher, du wirst ein wenig näher kommen.

Tatsächlich - was Sie sehen, ist normales Verhalten für IE: add border="1" zu Ihrem Haupt-Tabelle, und es werde Ihnen zeigen, was passiert, ein wenig klarer.

InformationsquelleAutor Steve Perks

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.