Rene: Div Style, iE 7, Firefox

Hallo Leute, ich habe in einer css datei folgendes definiert:
.trennlinie{
     width:   95%;
     height:   2px;
     background-color: #FFBF00;
}

dürfte jedem einleuchten wie das ausehen soll... eine simple orangene trennlinie 2px hoch <-- entscheident.

Source code:
<div class="trennlinie"></div>

Mozilla:
Richtige anzeige, genau was ich mir vorstelle

internet explorer:
eine horizontale orange linie ca 18px hoch, ich kann machen was ich will im iE geht das nicht auf die höhe < ca. 18px. Warum? Wo ist der Fehler, mozilla macht es richtig.

Source ausschnitt;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="">
<link rel='stylesheet' href='standard.css'>
</head>
<body>
 <div class="bannerhint">
  <div class="banner"></div>
 </div>
         <div class="trennlinie"></div>
         <div class="navihint"></div>

</body>

  1. hallo.

    diese trennlinie soll also varibel sein, je nach inhalt, oder wie?

    ich würde <hr> stattdessen verwenden, nicht extra ein div für ne trennlinie, alos etwa:

    <hr style="width:95%;color:#000000;height:2px;"></hr>

    Gruß.

  2. Ciao!

    Mozilla:
    Richtige anzeige, genau was ich mir vorstelle

    internet explorer:
    eine horizontale orange linie ca 18px hoch, ich kann machen was ich will im iE geht das nicht auf die höhe < ca. 18px. Warum? Wo ist der Fehler, mozilla macht es richtig.

    IIRC weigert sich der IE, irgendetwas so klein zu machen, daß keine Schrift mehr hineinpaßt. Versuch mal noch
    line-height:0px;
    oder
    overflow:hidden;

    By the way, brauchst Du überhaupt ein Extra-Div nur für eine Linie? Kannst Du nicht die border eines anderen Elements verwenden, z.B. vom banner oder vom navihint?

    Viele Grüße vom Længlich