Hallo Zusammen,
und wieder muss ich mich mit den Eigenheiten des IE rumärgern. Nachfolgender Code ist ein Auzug einer Seite. Es existiert ein großes Div mit einer Hintergrund-Grafik. Innerhalb dieses Div sollen mehrere kleinere Divs dargestellt werden, um eine Art Unternavigation darzustellen. In Safari und Firefox Mac ist soweit alles okay. IE blendet die einzelnen Unternavigationen nicht aus, nachdem er sie eingeblendet hat. Außerdem soll beim Rollover der Unternavigationspunkte das Wort farblich hinterlegt werden. Klappt auch, jedoch nicht über die gesamte Breite der einzelnen Divs. Ich würde mich freuen, wenn ihr mir mal wieder unter die Arme greifen könntet.
Hier der Code:
Code <html> <head> <title>green_shop_GR_948px</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { font-family: arial, helvetica, serif; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1; } #nav a { display: block; width: 10em; color:#006633; text-decoration:none; font-size:12px; line-height:150%; } #nav li { /* all list items */ float: left; width: 10em; /* width needed or else Opera goes nuts */ } #nav li ul { /* second-level lists */ position: absolute; background: #f4fbe5; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ } #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto; width: 10em; } .categories { line-height:100%; } li.items:hover { /* rollover der navipunkte */ display:block; text-decoration:underline; background-color:#c6e48c; width:10em; } #categorie1, #categorie2, #categorie3 { float: left; color: #ccc; margin-top:325px; width: 10em; } #categorie1, #categorie4, #categorie7, #categorie10 { margin-left:385px; } #categorie2, #categorie5, #categorie8, #categorie11 { margin-left:55px; } #categorie3, #categorie6, #categorie9, #categorie12 { margin-left:115px; } #categorie4, #categorie5, #categorie6 { float: left; color: #ccc; margin-top:155px; width: 10em; } #categorie7, #categorie8, #categorie9 { float: left; color: #ccc; margin-top:160px; width: 10em; } #categorie10, #categorie11, #categorie12 { float: left; color: #ccc; margin-top:150px; width: 10em; } </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="width:948px; height:930px; background-image:url(speciallinks/de/vkg/images/green_shop_gr_948px.jpg); background-repeat:no-repeat;"> <div id="categorie1"> <ul id="nav"> <li><a href="#"><span class="categories">Büromaschinen & Zubehör</span></a> <ul> <li class="items"><a href="#">Drucker</a></li> <li class="items"><a href="#">Faxgeräte & Zubehör</a></li> <li class="items"><a href="#">Multifunktionsgeräte</a></li> <li class="items"><a href="#">Scanner</a></li> <li class="items"><a href="#">Telefone & Anrufbeantworter</a></li> <li class="items"><a href="#">Tisch-/Taschenrechner & Zubehör</a></li> <li class="items"><a href="#">Akku-Ladegeräte, Akkus & Netzgeräte</a></li> <li class="items"><a href="#">Speichermedien & Zubehör</a></li> </ul> </li> </ul> </div> <div id="categorie2"> <ul id="nav"> <li><a href="#"><span class="categories">Haftnotizen, Blöcke<br/> und Formulare</span></a> <ul> <li class="items"><a href="#">Blöcke, Hefte & Zettel</a></li> <li class="items"><a href="#">Haftnotizen & Index-Haftstreifen</a></li> </ul> </li> </ul> </div> <div id="categorie3"> <ul id="nav"> <li><a href="#"><span class="categories">Einrichtungsgegenstände</span></a> <ul> <li class="items"><a href="#">Bürostühle</a></li> <li class="items"><a href="#">Einrichtungsgegenstände</a></li> <li class="items"><a href="#">Schutzmatten</a></li> </ul> </li> </ul> </div> <div id="categorie4"> <ul id="nav"> <li><a href="#"><span class="categories">Haushalt & Hygiene</span></a> <ul> <li class="items"><a href="#">Hygieneartikel</a></li> <li class="items"><a href="#">Kaffee & Tee</a></li> <li class="items"><a href="#">Küchen & Haushaltsartikel</a></li> </ul> </li> </ul> </div> <div id="categorie5"> <ul id="nav"> <li><a href="#"><span class="categories">Lager & Versand</span></a> <ul> <li class="items"><a href="#">Briefumschläge & Versandtaschen</a></li> <li class="items"><a href="#">Verpackungsmaterial & Lagerung</a></li> <li class="items"><a href="#">Waagen & Falzmaschinen</a></li> </ul> </li> </ul> </div> <div id="categorie6"> <ul id="nav"> <li><a href="#"><span class="categories">Ordnung im Büro</span></a> <ul> <li class="items"><a href="#">Hängemappen & Zubehör</a></li> <li class="items"><a href="#">Ordner</a></li> <li class="items"><a href="#">Ringbücher & Rückenschilder</a></li> <li class="items"><a href="#">Schnellhefter</a></li> <li class="items"><a href="#">Mappen</a></li> <li class="items"><a href="#">Trennblätter</a></li> <li class="items"><a href="#">Register</a></li> </ul> </li> </ul> </div> <div id="categorie7"> <ul id="nav"> <li><a href="#"><span class="categories">Papier & Papierprodukte</span></a> <ul> <li class="items"><a href="#">Etiketten</a></li> <li class="items"><a href="#">Kopier- & Laserpapier</a></li> </ul> </li> </ul> </div> <div id="categorie8"> <ul id="nav"> <li><a href="#"><span class="categories">Präsentieren</span></a> <ul> <li class="items"><a href="#">Bindesysteme & Zubehö</a></li> <li class="items"><a href="#">Flipcharts & Flipchartblöcke</a></li> <li class="items"><a href="#">Whiteboard-Tafeln & Pinnwände</a></li> </ul> </li> </ul> </div> <div id="categorie9"> <ul id="nav"> <li><a href="#"><span class="categories">Stifte, Kleben & Korrekturmittel</span></a> <ul> <li class="items"><a href="#">Stifte</a></li> <li class="items"><a href="#">Kleben</a></li> <li class="items"><a href="#">Korrekturmittel</a></li> </ul> </li> </ul> </div> <div id="categorie10"> <ul id="nav"> <li><a href="#"><span class="categories">Stempel & kunden-individuelle Produkte</span></a> <!--<ul> <li class="items"><a href="#">Link 1</a></li> <li class="items"><a href="#">Link 2</a></li> <li class="items"><a href="#">Link 3</a></li> <li class="items"><a href="#">Link 4</a></li> </ul>--> </li> </ul> </div> <div id="categorie11"> <ul id="nav"> <li><a href="#"><span class="categories">Tinten- & Tonerprodukte</span></a> <ul> <li class="items"><a href="#">Tintenpartronen</a></li> <li class="items"><a href="#">Toner</a></li> </ul> </li> </ul> </div> </div> datum: 17.12.09 </body> </html> ------
Mit einem freundlichen Gruß
Johannes Erhazar