Forum Doku Wiki Blog

Forumsarchiv 2005, Dezember
Vertikaler Abstand von <hr>-Elementen im IE

archivierte Beiträge lesen

  1. (CSS) Vertikaler Abstand von <hr>-Elementen im IE von der Frank, 20. 12. 2005, 22:03

Vertikaler Abstand von <hr>-Elementen im IE

Der folgende Beitrag wurde am 20. 12. 2005, 22:03 Uhr von der Frank veröffentlicht.

Bei der CSS-Formatierung von <hr>-Elementen ist mir aufgefallen, dass der IE größere vertikale Abstände macht als angebeben. Im Beispiel (margin: 1px 0;) lassen Mozilla und Opera genau 1px zwischen den Linien, wogegen der IE ca. 16px freilässt. Wie lässt sich das Verhalten des IEs hierbei erklären? Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?


MfG
der Frank



Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>&lt;hr&gt;-Test</title>
<style type="text/css">
<!--
hr {
 height: 1px;
 padding: 0;
 border: 0;
 color: #000;
 background-color: #000;
 margin: 1px 0;
}
-->

</style>
</head>
<body>
<hr />
<hr />
<hr />
<hr />
</body>
</html>

Vertikaler Abstand von <hr>-Elementen im IE

Der folgende Beitrag wurde am 21. 12. 2005, 07:44 Uhr von Axel Richter veröffentlicht.

Hallo,

> Bei der CSS-Formatierung von <hr>-Elementen ist mir aufgefallen, dass der IE größere vertikale Abstände macht als angebeben.
Ja, das ist ein bekannter IE-Bug.

> Im Beispiel (margin: 1px 0;) lassen Mozilla und Opera genau 1px zwischen den Linien, wogegen der IE ca. 16px freilässt. Wie lässt sich das Verhalten des IEs hierbei erklären?
Erklären lässt es sich nicht, es ist einfach falsch. Soweit ich weiß, gibt es auch keine Lösung.
Workaround: Man verwendet einfach keine HR-Elemente, sondern border-top und/oder border-bottom von vorhandenen Block-Elementen für horizontale Trennlinien.

> Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?
Nein, 1px+1px = 2px (margin-top + margin-bottom), oder wo setzt Du border? Hier gilt allerdings http://www.w3.org/TR/CSS21/box.html#collapsing-margins.

viele Grüße

Axel

Vertikaler Abstand von <hr>-Elementen im IE

Der folgende Beitrag wurde am 27. 12. 2005, 00:39 Uhr von MudGuard veröffentlicht.

Hi,

> Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?

Was jetzt? border oder margin? Das sind zwei völlig verschiedene Dinge.

Vertikale margins kollabieren, borders kollabieren nicht.
Demnach ist (da Du im CSS  ja margin benutzt) die Anzeige im Mozilla korrekt.

cu,
Andreas
--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter

Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.

Vertikaler Abstand von <hr>-Elementen im IE

Der folgende Beitrag wurde am 30. 12. 2005, 20:51 Uhr von der Frank veröffentlicht.

> Was jetzt? border oder margin? Das sind zwei völlig verschiedene Dinge.

Es muss natürlich margin-top + margin-bottom heißen, hab mich vertippt.

> Vertikale margins kollabieren, borders kollabieren nicht.
> Demnach ist (da Du im CSS  ja margin benutzt) die Anzeige im Mozilla korrekt.

Alles klar..danke

MfG
der Frank

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4