Trennlinie im IE

[malefiz]

Hallo,

könnte mir mal jemand bitte schnell nen Tipp zu folgendem Problem geben?

Und zwar würde ich gerne eine durchgehende Trennlinie ohne Seitenränder erreichen. Klappt auch im Firefox ganz prima, nur der IE kann/ will eine Höhe von 2px offenbar nicht darstellen. Die Trennlinie erscheint da immer ca 10px hoch. Ich hab das mit einem <div> versucht darzustellen.

Kann mir da jemand weiterhelfen?

Mein Code:

.trennlinie {
 position: absolute;
 top: 300px;
 width: 100%;
 height: 2px;
 background-color: #ffffff;
}

Gruß Malefiz

[stareagle]

Hallo,

Und zwar würde ich gerne eine durchgehende Trennlinie ohne Seitenränder erreichen. Klappt auch im Firefox ganz prima, nur der IE kann/ will eine Höhe von 2px offenbar nicht darstellen. Die Trennlinie erscheint da immer ca 10px hoch. Ich hab das mit einem <div> versucht darzustellen.

Kann mir da jemand weiterhelfen?

Mein Code:

.trennlinie {
position: absolute;
top: 300px;
width: 100%;
height: 2px;
background-color: #ffffff;
}

Der Name der Klasse weist für mich darauf hin, dass du ein div als Trennlinie "missbrauchst". Das solltest du unterlassen. Entweder verwendest du das dafür vorgesehene HTML-Element <hr /> oder - und das ist die bessere Variante - du gibst dem Element unter/über/neben dem die Begrenzung sein soll eine entsprechende Border (per CSS).

Falls das ganze oben nur als Beispiel gedacht war - sprich du verwendest bereits die zweite Variante -, könntest du bei dem Elternelement des jeweiligen Elements versuchen am Innenabstand (padding) zu drehen, oder am Außenabstand (margin) des Elements selbst.

Gruß

Stareagle

[Olaf Schneider]

Hallo Malefiz,

der IE versucht immer so zu tun, als müsse er in jedes div ein Zeichen schreiben können und dieses hat natürlich eine gewisse Höhe …

Möglichkeiten (ungetestet für Deinen Fall):

font-size: 1px;

oder

overflow: hidden;

Gruß
Olaf

[Nico]

Hi,

Und zwar würde ich gerne eine durchgehende Trennlinie ohne Seitenränder erreichen. Klappt auch im Firefox ganz prima, nur der IE kann/ will eine Höhe von 2px offenbar nicht darstellen. Die Trennlinie erscheint da immer ca 10px hoch. Ich hab das mit einem <div> versucht darzustellen.

Da habe ich auch viel probiert. Das ist leider wegen des IEs nicht einheitlich hinzubekommen. Problematisch sind aber nur die margins. Ich poste Dir mal, wie ich meine <hr />-Tags mit css gestaltet habe. Vielleicht hilft Dir das ja.

hr { background-color: #000000;
color: #000000;
text-align: left;
height: 1px;
border: 0; }

Grüße

Nico

[Ingo Turski]

Hi,

hr { background-color: #000000;
color: #000000;
text-align: left;
height: 1px;
border: 0; }

Wenn Du eine hr nehmen willst, dann formatiere sie z.B. so, dass nur eine border übrig bleibt:

hr {  
  height:0; line-height:0; font-size:0; border:0;  
  border-bottom:1px solid black;  
}

freundliche Grüße
Ingo