IE-Problem mit verschobenen DIVs @ tutorials.de: Tutorials, Forum & Hilfe

Kaeschdin · 08.02.10 08:44

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-Code:

<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}

Maik · 08.02.10 13:16

Hi,

bitte zukünftig meinen als "Wichtig" markierten und in der Themenübersicht oben festgehaltenen Thread beachten, den ich hier nicht grundlos reingestellt habe:

Bei CSS-Problemen mit dem IE bitte die Version angeben

Oder dürfen wir jetzt frei und munter raten, von welcher IE-Version hier die Rede ist?

mfg Maik

Kaeschdin · 08.02.10 13:58

Zitat von Maik

Hi,

bitte zukünftig meinen als "Wichtig" markierten und in der Themenübersicht oben festgehaltenen Thread beachten, den ich hier nicht grundlos reingestellt habe:

Bei CSS-Problemen mit dem IE bitte die Version angeben

Oder dürfen wir jetzt frei und munter raten, von welcher IE-Version hier die Rede ist?

mfg Maik

Autsch. Ist mir durchgerutscht. Sorry.

IE 6 (hier ist auch das DIV "box" verschoben) und IE 7.

Maik · 08.02.10 19:59

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Problem mit divs

2 DIVs nebeneinander innerhalb eines Haupt-DIVs

Draggable divs - Positionen versch. divs speichern

Problem mit DIVs

problem mit divs

E-Mail:

Abonnieren Abbestellen