✔ height wird nicht richtig dargestellt

Status
Nicht offen für weitere Antworten.
P

Pherseus

Erfahrenes Mitglied
Hi, hab folgende css datei

Code: 
 .
 .
 .
 div.mainform {
 	width:998px;
 	height:10px;
 	margin:0px auto;
 	border-width:1px;
 	border-style:solid;
 	text-align:left;
 	padding:0px;
 }
 .
 .
 .

und dazu diese html datei:
Code: 
 <div class="mainform">
 			
 		</div>

Nun wird im Firefox die höhe von 10px korrekt angezeigt. Im IE bleibt die höhe aber ca. 20px. Kleiner gehts nicht. Wenn ich es größer alas 20px mache dann wird es größer aber wenn ich es kleiner mache wird es nicht kleiner. Woran liegts?
 
Der Internet Explorer interpretiert die Leerzeichen im Tag als Text und stellt ihn somit auch dar. Da die Standardschriftart wohl mehr als 10 Pixel Höhe benötigt, wird das div-Element entsprechend erweitert. Abhilfe schafft beispielsweise die Eigenschaft overflow: hidden
 
Wenn das DIV.mainform Text enthalten soll, empfiehlt es sich, die Schriftgröße (entsprechend der Elementhöhe) mit 10 Pixel zu skalieren:

Code: 
div.mainform {
         width:998px;
         height:10px;
         margin:0px auto;
         border-width:1px;
         border-style:solid;
         text-align:left;
         padding:0px;
         font-size: 10px;
}
Wird in dem DIV kein Text eingefügt, kann die Schriftgröße auf 0 gesetzt werden, damit im IE die gewünschte Elementhöhe dargestellt wird:
Code: 
div.mainform {
         width:998px;
         height:10px;
         margin:0px auto;
         border-width:1px;
         border-style:solid;
         text-align:left;
         padding:0px;
         font-size: 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück