nicht angemeldet
Ungewollter Abstand nach Bild im Mozilla (Strict-Doctype)
0 0 0 0 0 0 Danke!
Ungewollter Abstand nach Bild im Mozilla (Strict-Doctype)
Hallo Forum,
beim Versuch meinen HTML-Code HTML 4.01 Strict zu machen, bin ich auf
ein Phänomen im Mozilla gestoßen, das ich mir bisher nicht erklären kann.
Die HTML-Seite besteht aus einer Tabelle mit genau eine Zelle, in der sich
ein einzelnes Bild befindet. Der Rahmen der Tabelle ist sichtbar. Wenn ich
der Seite einen Transitional-Doctype verpasse, wird die Seite so dargestellt,
wie ich dies erwarten würde: Das Bild wird abstandsfrei mit dem Rahmen der
Tabelle umgeben. Setze ich aber den Strict-Doctype, zeigt der Mozilla
unter dem Bild einen Abstand von etwa 5 Pixeln zum Rand an.
Meine Vermutung, daß hier noch ein versteckter Innenabstand (padding)
vorhanden ist, lies sich nicht bestätigen. Ein "padding:0px; margin:0px;
border-spacing:0px" brachte keinen Erfolg.
Im Forums-Archiv fand ich unter http://forum.de.selfhtml.org/archiv/2002/4/9694/
ein ähnliches Problem, das durch die Angabe "vertical-align:bottom;" behoben
werde konnte. Leider bringt aber auch diese Angabe hier scheinbar nichts.
Versteckte Leerzeichen sind auch nicht vorhanden, da auch das direkte
Hintereinanderschreiben der einzelnen Tags ohne Leerräume zwischen den Tags
keine Besserung gebracht hat.
Der HTML-Code zum Problem sieht so aus:
---------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Abstand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color:black;">
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<td style="vertical-align:bottom;"><img src="bild.gif" alt=""></td>
</tr>
</table>
</body>
</html>
---------------------------------------------------------------------------
Der Code ist valide.
Wer sich das ganze online angucken will, findet die Versionen mit Transitional-
und Strict-Doctype unter folgenden Adressen. Bis auf den Doctype sind beide
Seiten identisch.
Transitional: http://slyh.de/selfhtml/abstand-trans.html
Strict: http://slyh.de/selfhtml/abstand-strict.html
Vielleicht kennt ja jemand dieses Problem oder eine mögliche Ursache. Vielleicht
ist es aber ja auch wirklich ein Bug in Mozilla. Ich bin jedenfalls gespannt! :-)
Gruß und Danke!
Slyh
-
hi
Der Code ist valide.
biste sicher?
Wer sich das ganze online angucken will, findet die Versionen mit Transitional-
und Strict-Doctype unter folgenden Adressen. Bis auf den Doctype sind beide
Seiten identisch.Transitional: http://slyh.de/selfhtml/abstand-trans.html
Strict: http://slyh.de/selfhtml/abstand-strict.htmlmozilla 1.1 zeigt beide varianten gleich an.
Vielleicht kennt ja jemand dieses Problem oder eine mögliche Ursache.
nimm statt der border der tabelle die css des bildes an sich, das geht auf jeden fall.
ist es aber ja auch wirklich ein Bug in Mozilla. Ich bin jedenfalls gespannt! :-)
nö.
Fabian
-
Hallo,
frag' mich nicht warum, aber Du musst es so machen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Abstand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
img { padding:0px; margin:0px; border:0px; display:block;}
-->
</style>
</head><body style="background-color:black;">
<table border="1" cellpadding="0" cellspacing="0">
<tr><td><img src="suchreflex_err.jpg" alt=""></td>
</tr>
</table></body>
</html> -
Vielleicht kennt ja jemand dieses Problem oder eine mögliche Ursache.
Mysteriöse Abstände können oft auf die line-height zurückgeführt werden. ein style="line-height: 0;" im entsprechenden <td> sollte den Abstand auf jeden Fall unterbinden. Abgesehn davon ist das CSS-Attribut "border" in all seinen Variationen und Ausprägungen sicher geeigneter, um einem Bild einen Rahmen zu verpassen.
P.S.: Mozilla 1.0 rendert bei mir beide files im standard compliance mode gleich (mit Abstand).
-
beim Versuch meinen HTML-Code HTML 4.01 Strict zu machen, bin ich auf ein Phänomen im Mozilla gestoßen, das ich mir bisher nicht erklären kann.
Die HTML-Seite besteht aus einer Tabelle mit genau eine Zelle, in der sich ein einzelnes Bild befindet. Der Rahmen der Tabelle ist sichtbar. Wenn ich der Seite einen Transitional-Doctype verpasse, wird die Seite so dargestellt, wie ich dies erwarten würde: Das Bild wird abstandsfrei mit dem Rahmen der Tabelle umgeben. Setze ich aber den Strict-Doctype, zeigt der Mozilla unter dem Bild einen Abstand von etwa 5 Pixeln zum Rand an.
Im Forums-Archiv fand ich unter http://forum.de.selfhtml.org/archiv/2002/4/9694/ ein ähnliches Problem, das durch die Angabe "vertical-align:bottom;" behoben werde konnte.
Bilder stehen per Definition auf der Basisline einer Zeile (siehe http://www.w3.org/TR/html4/struct/objects.html#h-13.7.4, align=bottom). Auf dieser Linie stehen alle Buchstaben mit Ausnahme jener, die noch ein "Kellergeschoss" haben wie zum Beispiel g und j. Der Abstand, den Du bei Dir unter dem Bild siehst, ist genau die Höhe dieses "Kellergeschosses".
vertical-align:bottom kann Dir insofern nicht helfen, als das es die _gesamte_ Zeile ganz unten in die Tabellenzelle setzt; das untere Ende einer Zeile ist aber nicht die Basislinie, sondern dazu gehört eben auch noch der Keller.
Was Dir hilft: Aus dem Bild mittels display:block ein Blockelement machen, alternativ auf Tabellenlayout oder auf den strict-Modus verzichten.
Gruß,
soenk.e -
Hi!
<td style="vertical-align:bottom;"><img src="bild.gif" alt=""></td>
muss so aussehen: <td><img src="bild.gif" alt="" style="vertical-align:bottom;"></td>
Denn in deiner Version würdest du nur den gesmten Zelleninhalt am unteren Rand der Tabellenzelle ausrichten, also auch den Text. Damit steht das Bild aber trotzdem auf der Baseline und nicht Bottom. Deswegen gehört vertical-align: botttom in das Bild!!!
Weiterführende Lektüre http://devedge.netscape.com/viewsource/2002/img-table/ist es aber ja auch wirklich ein Bug in Mozilla. Ich bin jedenfalls gespannt! :-)
Ist es NICHT!!!!!!!!!!!!!!!!!
Gruß Herbalizer
-
Hallo,
ich möchte mich erstmal bei allen Helfern bedanken!
Ein paar Kleinigkeiten, um nicht auf jeden einzeln antworten zu müssen:
Die verlinkten HTML-Dateien waren natürlich nur minimale Test-Cases, und
zur Demonstration gedacht. Wenn ich einen Rand um ein Bild haben wollte,
würde ich tatsächlich CSS verwenden. :-)Daß das Problem evtl. auf die Baseline zurückzuführen ist, war schon meine
Vermutung. Daß ein "text-align:bottom" im <td>-Tag aber die ganze Zeile
um diese eine Stufe nach unten setzt, unter der dann wieder ein Baseline
ist, war mir so nicht klar. Wenn man drüber nachdenkt, ist das aber ja nur
logisch. Auch war mir nicht klar, daß ein "display:block" dasselbe Problem
auch beheben könnte.Der Link zu Devedge ist hochinteressant! Eigentlich hätte ich auch gleich
auf die Idee kommen können, mal dort vorbeizuschauen.Bei mir zeigt der Mozilla 1.1 tatsächlich nur mit strict-Doctype den Abstand
an. Daher meine Spekulation darüber, ob Mozilla hier vielleicht fehlerhaft
ist. (Eigentlich würde ich bei demselbem Code auch dasselbe Ergebnis erwarten,
unabhängig davon ob strict oder nicht.)Also, nochmal meinen Dank allen Beteiligten! Ihr habt mir sehr geholfen!
Gruß
Slyh-
Gruß Herbalizer
Bei mir zeigt der Mozilla 1.1 tatsächlich nur mit strict-Doctype den Abstand
an. Daher meine Spekulation darüber, ob Mozilla hier vielleicht fehlerhaft
ist. (Eigentlich würde ich bei demselbem Code auch dasselbe Ergebnis erwarten,
unabhängig davon ob strict oder nicht.)Nein. Im Mozilla ab 1.0.1 und 1.1 (und somit NN7) gibt es zu den bereits bekannten Verhaltensweisen full standards mode und quirks mode jetzt auch einen dritten: den almost standards mode. Dieser letztere bewirkt u.a. da Bilder so ausgerichtet werden wie bei anderen Browsern üblich, was beim quirks mode natürlich auch der Fall ist.
Die jeweiligen Verhaltensweisen sind abhängig von der Doctype: http://www.mozilla.org/docs/web-developer/quirks/doctypes.htmlGruß Herbalizer
PS: Die Darstellung im full standards mode ist nicht buggy sondern als einzige Implementierung Standardkonform.
-