Frage margin-top in den Browsern

[Ruccola1]

Hallo an alle,

ich verwende eine horizontale Linie <hr> mit Schatten und habe diese als Abschluss von einem Container mit einem margi-top wert positioniert.

Jetzt sieht das ja in FX und Crome super aus, aber im Safari ist die Linie zu hoch oben.
Der Schatten funktioniert in allen Browsern gleich, nur die Position stimmt nicht.

Hat jemand eine Idee wie ich das umgehen kann?

Vielen Dank im Voraus!

 

[MrMurphy]

Hallo,

ohne den Quelltext können wir dir nicht helfen.

Wobei hr-Linien in der Regel semantisch falsch und überflüssig sind. Aber ohne Quelltext kann ich halt nur raten.

Gruss

MrMurphy

 

[Ruccola1]

Ich habs mal so probiert:

hr {
height: 1px;
margin: 30px 0;
background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #333333), to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -moz-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -o-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
border: 0;
}
hr:after {
margin-top: -50px;
display: block;
content:'';
height: 30px;

}

 

[Trüffelkrieger]

Wird vermutlich irgendein Standard-Abstand von den Browsern Schuld sein. Browser geben Elementen Standard-Abstände et cetera mit, damit es auch ohne CSS aussieht. Das beste wäre du lädst das Ganze irgendwo hoch und postest hier den Link.
Btw: Was soll das negative Margin bei dem :after-Pseudo-Element (beziehungsweise wofür ist das überhaupt)