IE-Problem mit verschobenen DIVs

K

Kaeschdin

Erfahrenes Mitglied
Hallo zusammen,

ich habe das Problem, dass meine beiden Navigationen (eine vertikale #navi und eine horizontale #subnavi) im IE irgendwo hängen, nur nicht an ihrem vorgesehenen Platz. Irgendwas übersehe ich offensichtlich.

Hier der Seitencode:

HTML: 
<body>
<div id="main">
<div id="stripe"></div>
<div id="box"><a href="index.html"><img src="http://www.xxx.de/logo.gif" style="margin:20px" border="0"/></a>
<div id="navi">
<ul id="navigation">
				  	 <li><a href="unternehmen.html">UNTERNEHMEN</a></li>
				  	 <li><a href="produkte.html">PRODUKTE</a></li>
				  	 <li><a href="technologien.html">TECHNOLOGIEN</a></li>
				  	 <li><a href="service.html">SERVICE</a></li>
				  	 <li><a href="referenzen.html">REFERENZEN</a></li>
					 <li><a href="jobs.html">JOBS</a></li>
				</ul>
</div>
<div id="textbox" style="text-align:center; margin-top:35px">
<img src="http://www.xxx.de/logo_gross.gif" /><br /><br /><br />
Ganz viel Text.
</div>
<div id="subnavi" style="margin-top:425px; padding-left:610px">
<ul id="subnavigation">
  <li id="navi02"><a href="index.html">STARTSEITE</a></li>
  <li id="navi01"><a href="kontakt.html">KONTAKT</a></li>
  <li id="navi01"><a href="anfahrt.html">ANFAHRT</a></li>
  <li id="navi02"><a href="impressum.html">IMPRESSUM</a></li>
</ul>
</div>
</div>
</div>
</body>

CSS:

Code: 
body {font-family: Arial, Helvetica, sans-serif; font-size:12px; color:black}
#main {margin:50px auto; background-color:#5A2E2E; width:994px; height:630px}
#box {float:left; margin-top: 12px;background-color:#FFFEDF; width:949px; height:525px; padding-left:10px; padding-top:10px}
#stripe {float:left; width:12px; height:630px; background-color:#DFBA69; margin-left:12px;}
#navi {position: absolute; float:left; margin-top: 20px}
ul#navigation li{margin:25px; padding:0px; text-align:right;list-style-type: none; width:112px;}
ul#navigation li .current{text-align:right;list-style-type: none; color:#fff; padding:10px 30px 20px 140px;margin-left: -95px; background-image:url(../images/navi_bg.png); background-repeat:no-repeat; height:39px; width:220px; /*padding: 10px 0px 0px 45px; */}
ul#navigation a{text-decoration:none; color:#5A2E2E; font-size:12px}
#subnavi {position: absolute; margin-top:546px; padding-left:714px}
ul#subnavigation li {display:inline; list-style-type: none; padding:9px}
ul#subnavigation li .current{display:inline; list-style-type: none; color:#DFBA69}
ul#subnavigation a{text-decoration:none; color:#FFFEDF; font-size:10px}
#textbox {position: absolute; float:left; margin-left: 290px; margin-top: 0px; width:540px; padding:10px; line-height:1.5em; text-align:justify}
 
Im IE6 dürfte sich schon mal überall dort, wo gemeinsam eine float- und margin-left-Angabe existieren, sein Doubled Float-Margin Bug bemerkbar machen (gilt auch für #box, wo du im Inline-Style margin:20px deklariert hast ), der diese linken Außenabstände verdoppelt, was zum Umbruch der Boxen im Layout führt. Die Angabe display:inline behebt diesen Bug.

Desweiteren würde ich es mal anstelle der margin-top-Angaben in Kombination mit position:absolute, stattdessen mit einer top-Positionsangabe versuchen, denn hier scheinen IE6 und IE7 deine derzeitigen oberen Außenabstände nicht so zu interpretieren, wie die anderen Browser.

Dafür muß #main zusätzlich mit position:relative formatiert werden, damit sich die absoluten Positionsangaben darin relativ verhalten, und sich nicht auf den Dokumentkörper beziehen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück