nicht angemeldet
IE zeigt Elemente zu hoch an
Hi,
hab mir vor etwa zwei Monaten mal SELFHTML z.T. durchgeselen und bin nun sein ein paar Tagen dabei eine Homepage zu schreiben.
Hatte nun folgendes Problem: Ich wollte ein Banner auf der Seite platzieren und darunter einen Balken, wo evtl. später noch etwas hineinkommen wird, darunter sollte dann ein div-Element für die Navigation platziert werden.
Nun sollten diese Objekte genau aneinander grentzen (kein Leerraum dazwischen).
Habe das dann mit absoluter Positionierung gelöst. Das war dann in allen Browsern (FF, NN, Opera) OK, bis auf den IE (WinXP SP1), welcher die Elemente unter dem Balken drei Pixel zu hoch anzeigte. Nach langem überlegen und erfolglosem suchen im Forum habe ich dann das Atribut "overflow:hidden" für den Balken gesetzt und siehe da... es klapt! Sprich: der Inhalt dieses Balkens war für den Internet Explorer anscheinend größer, als der Balken selbst.
Jetzt zu meiner Frage:
Wie kommt es, dass der Inhalt eines LEEREN div-Elements hier, im IE, zu groß ist? Wenn ihr mich fragt, paradox! Oder habe ich da einfach etwas falsch verstanden?
Hier ist der Inhalt der .htm- und .css-Dateien:
index.htm............................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Network of Akira</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bground.css">
</head>
<body>
<div style="width:800px; margin-left:auto; margin-right:auto; text-align:left; padding:0px;">
<div style="position:absolute; top:0px;">
<!--Banner-->
<img src="banner_big.jpg" alt="Banner" class="banner_big"/>
<div class="navi_1x1"></div>
<div class="navi_2x1"></div>
<img src="gr_ecke.gif" alt="" class="gif_gr_ecke" />
</div>
</div>
</body>
</html>
NICHT INHALT DER .htm-DATEI:
---------------------------------------------------------------------
<div class="navi_1x1"></div> <--- der Balken mit dem zu großen Inhalt
<div class="navi_2x1"></div> <--- wird im IE zu hoch dargestellt
<img src="gr_ecke.gif" alt="" class="gif_gr_ecke" /> <--- wird im IE zu hoch dargestellt
---------------------------------------------------------------------
style.css............................................................
<!--
body {background-color:#D7D7E6;
font-family:arial;
text-align:center;
}
h1,h2,p {color:#000000;
}
h1,h2 {margin:0.4em;
}
p {font-size:10pt;
margin:1em;
line-height:1.3em;
}
a:link {color:#FFFFFF;
text-decoration:none;
}
a:visited {color:#AAAAAA;
text-decoration:none;
}
a:hover {color:#AAAAAA;
text-decoration:underline;
}
-->
bground.css..........................................................
<!--
.banner_big {with:800px;
hight:130px;
position:absolute;
top:20px;
}
.navi_1x1 {width:800px;
height:15px;
background-color:#C8C8CD;
position:absolute;
top:150px;
overflow:hidden;
}
.navi_2x1 {width:137px;
height:100px;
background-color:#660000;
position:absolute;
top:165px;
}
.gif_gr_ecke {position:absolute;
top:165px;
left:137px;
}
-->
freundliche Grüße aus Lindhorst (bei Hamburg)