✔ Height | FireFox - Internet Explorer

[Automatikk]

Hi,

Ich habe 2 Bilder als Dateianhang gemacht , das erste Bild zeigt an wie ich einen Teil meiner Seite gerne hätte (wie es auch im Firefox dargestellt wird), das zweite wie es im Internet Explorer dargestellt wird.

Nun weiß ich leider nicht meinen Fehler (/Fehler vom IE) oder wie ich es anders machen könnte.

Hier einmal die CSSbeschreibung.

#linie_waagerecht{
 background-color:transparent;
 background-image:url(Rot_Pixel_Start.jpg);
 position: absolute;
 float: right;
 width: 1024px;
 height: 4px;
 margin: 0px;
 padding: 0px;
 left: 0px;
 top: 200px;
}

#linie_senkrecht {
 background-color:transparent;
 background-image:url(Rot_Pixel_Start.jpg);
 position: absolute;
 float: right;
 width: 4px;
 height: 768px;
 margin: 0px;
 padding: 0px;
 left: 200px;
 top: 0px
}
}

Ich hoffe auf Tipps von euch das es im IE sowie im FF gleich aussieht.

Thx schonmal an alle

 

[Maik]

Du mußt entweder die Schriftgröße auf null setzen, oder overflow:hidden angeben, damit der IE die 4px-Höhe korrekt darstellt:

#linie_waagerecht{
 background-color:transparent;
 background-image:url(Rot_Pixel_Start.jpg);
 position: absolute;
 float: right;
 width: 1024px;
 height: 4px;
 margin: 0px;
 padding: 0px;
 left: 0px;
 top: 200px;
 font-size: 0;
}

/* oder */

#linie_waagerecht{
 background-color:transparent;
 background-image:url(Rot_Pixel_Start.jpg);
 position: absolute;
 float: right;
 width: 1024px;
 height: 4px;
 margin: 0px;
 padding: 0px;
 left: 0px;
 top: 200px;
 overflow: hidden;
}

Zudem solltest du die doppelt vorhandene geschweifte Klammer im CSS-Code entfernen:

#linie_senkrecht {
 background-color:transparent;
 background-image:url(Rot_Pixel_Start.jpg);
 position: absolute;
 float: right;
 width: 4px;
 height: 768px;
 margin: 0px;
 padding: 0px;
 left: 200px;
 top: 0px
}
}