nicht angemeldet
Firefox Bug - trotz padding:0 Abstände
Hallo,
ich hab mal wieder ein Problem. ;-)
Das Problem ist mit dem Firefox auf dieser Seite sichtbar: Firefox Bug
Auf der Seite befindet sich ein rechts floatendes <p>-Element, welches als Inhalt lediglich ein Bild hat.
Daneben fließt ein weiterer Paragraph mit Text.
Der floatendene Paragraph mit dem Bild hat in den CSS-Einstellungen
padding:0; margin:0;
definiert, weshalb es keine Abstände geben sollte.
Im IE und Opera ist das auch so, aber beim Firefox wird unter dem Bild ein kleiner Rand angezeigt? Wieso ist das so?
Danke für eure Hilfe,
Mike
-
Hi!
Im IE und Opera ist das auch so, aber beim Firefox wird unter dem Bild ein kleiner Rand angezeigt? Wieso ist das so?
Das ist das bekannte Unterlängen-Problem: Der Fuchs läßt da ein bißchen Platz wegen eventueller Buchstaben, die unter die Grundlinie hinausragen, z.B. g oder j.
Es gibt mehrere Möglichkeiten, das zu beheben, beispielsweise kannst Du die line-height reduzieren oder das Bild unten ausrichten anstatt an der Grundlinie.Theoretisch kannst Du das p um das Bild auch ganz weglassen und das img selbst floaten lassen. Das setzt aber voraus, daß das ganze Testszenario in ein anderes Element hineinkommt (so was wie <div id="content"> o.ä.), da der body IIRC keine Inline-Elemente wie img als direkte Nachfahren enthalten darf (zumindest nicht in der Strict-Variante).
Viele Grüße vom Længlich
-
Hallo,
erstmal vielen Dank für die Hilfe
Es gibt mehrere Möglichkeiten, das zu beheben, beispielsweise kannst Du die line-height reduzieren oder das Bild unten ausrichten anstatt an der Grundlinie.
OK, das hilft mir weiter. Ich hab in dem betroffen <p>-Element die line-height auf einen sehr kleinen Wert gesetzt (ist ja sowieso kein Text enthalten) und nun sieht es in allen Browsern wie gewünscht aus.
Danke für den Tipp!
Mike
-
Hi,
OK, das hilft mir weiter. Ich hab in dem betroffen <p>-Element
a propos: Warum ergibt bei Dir ein Bild einen Textabsatz?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
a propos: Warum ergibt bei Dir ein Bild einen Textabsatz?
Stimmt, das Beispiel gibt nicht wirklich Sinn :-). Aber darum ging es ja auch gar nicht, ich wollte nur auf einfache Weise mein Problem erklären :-).
Mike
-
-
-
-
Hi,
padding:0; margin:0;
Hast du es schon mal mit margin:0 0; probiert??
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
padding:0; margin:0;
Hast du es schon mal mit margin:0 0; probiert??
Das dürfte in standardkonformen Browsern wie dem Firefox keinen Unterschied machen.
-
Hi,
Das dürfte in standardkonformen Browsern wie dem Firefox keinen Unterschied machen.
Ich hatte da kürzlich ein Problem mit der validierung wegen margin:0; ,
mit margin:0 0; ging es dann, darum die frage.Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
Ich hatte da kürzlich ein Problem mit der validierung wegen margin:0; ,
mit margin:0 0; ging es dann,beide Angaben sind identisch und valide. Wenn Du mit "margin:0;" ein Problem hattest, lag es an etwas anderem.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
Im IE und Opera ist das auch so, aber beim Firefox wird unter dem Bild ein kleiner Rand angezeigt? Wieso ist das so?
Das liegt an der Basislinie des Textes (und der Firefox macht es nicht falsch). Gib dem enthaltenen <img> "vertical-align:bottom;" oder "display:block;", dann sollte es passen.
