IE 9 + <div height:> Problem

Wuschelchen · 30. August 2011

Hallo allerseits!

Ich habe folgenden Code:

HTML-Seite:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="wohnung.css">
	</head>
	
	<body>
		
		<div class="trenner_middle"></div>
		blablabla<br>
		<div class="trenner_bottom"></div>
		
	</body>
</html>

CSS-Datei:

Code:

	.trenner_middle
		{
			width: 750px;
			height: 2px;
			min-height: 2px;
			max-height: 2px;
			background-color: #002f67;
			clear: both;
		}
		
	.trenner_bottom
		{
			width: 750px;
			height: 10px;
			min-height: 10px;
			max-height: 10px;
			margin-bottom: 10px;
			background-color: #002f67;
			clear: both;
		}

So ... das ganze wird im FF korrekt angezeigt! Sprich trenner_middle mit einer Höhe von 2 px und der bottom mit 10px!

Im IE9 spinnt das alles rum ... da sind beide Trenner dicker als sie sein sollten und lassen sich anscheinend nicht kleiner als ~ 15px einstellen ...

Bitte helft mir das das im IE 9 auch richtig dargestellt wird ...

Jurij · 30. August 2011

Hey,

setzte mal alles auf 0px, was zum Boxmodel gehört. Also Border, Margin und Padding und schau was dann passiert.

OhNoIKilledMyHD · 30. August 2011

font-size:0px; margin:0px;
und vielleicht ein bisschen zusammenfassen

.trenner_middle, .trenner_bottom
{
width: 750px;
min-height: 2px;
max-height: 2px;
background-color: #002f67;
clear: both;
border:0px;
margin:0px;
font-size:0px;
}

.trenner_middle
{
height: 2px;
}

.trenner_bottom
{
height: 10px;
}

Oder benutze overflow:hidden, falls das besser gefällt.
Dann könntest Du für ältere Browser (z.B. IE6) auch noch ein   in die divs packen.

Wenn es noch mehr Trenner geben wird, empfehle ich die allgemeinen Eigenschaften für alle Trenner in einer Klasse zusammenzufassen (z.B. .trenner) und die individuellen über ids (z.B. #mitte).

Wuschelchen · 30. August 2011

Danke für eure Antworten =) !

Lösung war ein "overflow:hidden", da der IE ansonsten die divs auf die normale Schriftgröße aufbläht xD

Hat sich also erledigt und wird nun richtig angezeigt! Danke!

Suche

IE 9 + <div height:> Problem

Wuschelchen

Lt. Junior Grade

Jurij

Lt. Commander

OhNoIKilledMyHD

Lieutenant

Wuschelchen

Lt. Junior Grade

Ähnliche Themen