✔ <hr> Margin im IE / CSS Formatierung

[Mik3e]

Hi zusammen,

Habe ein ziemliches Problem mit <hr /> Elementen (horizontal rule).
Die Linie soll 1px dick sein und nach oben und unten jeweils 5px margin aufweisen.
Soweit so gut, alles in CSS gepackt und voila -> im Firefox wird alles korrekt dargestellt.

Nur der IE ignoriert meine Angaben zum <hr /> Element sehr hartnäckig und macht nach oben und unten ein Margin wie es ihm beliebt.

Hier das CSS (habe schon einen IE Workaround versucht, ohne Erfolg):

hr {
	height:1px;
	border-style:solid;
	border-color:#668D00;
	border-width:1px 0px 0px 0px;
	margin:5px 0px 5px 0px;
	_margin:-5px 0px -5px 0px; /* IE Bugfix */
	padding:0px;
	line-height:1px;
	text-align:right;
	display:compact;
}

Hat jemand eine Idee, was ich noch definieren muss, damit der IE die Margins richtig setzt!?

Danke & Ciao,
Mike

 

[Quaese]

Hi,

versuch es mal mit float: left und width: 100%.

hr { height: 1px;
     border-style: solid;
     border-color: #668D00;
     border-width: 1px 0 0 0;
     margin: 5px 0 5px 0;
     float: left;
     width: 100%;
     padding: 0;
     line-height: 1px;}

Du solltest anschliessend jedoch nicht vergessen, den normalen Textfluss wieder herzustellen (clear).

Eine andere Möglichkeit wäre es, das HR-Element in einem DIV zu verstecken. Die Linie wird über die
Rahmen des DIVs erstellt.

.hr-div{ height: 1px;
         font-size: 1px;
         line-height: 0em;
         border-style: solid;
         border-color:#900;
         border-width: 1px 0 0 0;
         margin: 5px 0 5px 0;
         padding: 0;
         overflow: hidden;}
.hr-div hr{ visibility: hidden;}

<div class="hr-div"><hr /></div>

Ciao
Quaese