CSS/Tabellenproblem mit Netscape

[Leini]

Hallo,

ich bin gerade dabei meine HP neu zu gestallten und wollte dabei das Design mit CSS machen.

Dabei bin ich auf ein Problem gestoßen, das ich trotz der Suche hier nicht lösen konnte.

Zum Problem:
Gebe ich als Doctype XHTML Strict an, werden die Tabellen im IE und Opera korrekt angezeigt, bei Netscape erscheint jedoch rechts und unter der Grafik ein Rand. Ändere ich den Doctype auf Transistional wird alles wieder korrekt dargestellt.

Hier die URLs zu zwei Beispielen:
Beispiel Strict
Beispiel Transitional

Der Code des CSS:

table  {
    margin: 0px;
    padding: 0px;
    width: 187px;
    table-layout:fixed;
}

td.ecke {
    width: 30px;
    height: 10px;
    background-color: #FFF000;
}

td.kopf {
    width: 187px;
    height: 32px;
    background-color: #FF0000;
}

td.mitte {
    width: 127px;
    height: 10px;
    background-color: #FFF000; 

Woran könnte es denn liegen, oder hab ich nen prinzipiellen Fehler eingebaut? Bin gerade erst dabei mir das alles anzueigenen, könnte also schon sein

[TobiaZ]

scheint auch net so korrekt zu sein:

http://validator.w3.org/check?uri=ht...est-strict.htm

[Leini]

Ok, ok, hatte in der Eile vergessen den Body-Tag zu schließen

Habs korrigiert, aber das ändert leider auch nichts an der Sache...

[wahsaga]

den abstand unter dem bild bekommst du weg, wenn du es mit vertical-align:bottom formatierst.

und bezüglich des abstandes rechts: deine tabelle ist einfach zwei px breiter als das bild ... siehst du sehr gut, wenn du im html-code mal 189 als breite für das bild angibst.
liegt wahrscheinlich an den (unsichtbaren default-)rahmen der tabellenzellen, border-collapse o.ä. eigenschaften könnten hier evtl. helfen.

[Leini]

Danke für eure Tipps.

Wenn ich nur den Abstand zwischen zwei untereinanderliegenden Zeilen wegbekommen will, ist Dein Tipp richtig. Veruche ich jedoch ein Design aus mehreren Zeilen aufzubauen, habe ich die selben Probleme wieder.

Die Größe des Bildes zu ändern ist wohl auch nicht optimal

Ich hab beim nochmaligen Googlen allerdings die Lösung und auch die Ursache des Problems gefunden. Hier der Link dazu: http://www.dodabo.de/html+css/img-table/.
Interessiert vielleicht den ein oder anderen.

Das Problem ist wohl, dass Bilder als Inline-Content angesehen werden und bei einer Strict-Doctype dann die oben beschriebenen Probleme auftauchen. Mit der Definition der Bilder als Blocklevelelemt funktioniert alles wieder wunderbar.