|
|||
dynamisches CSS menü funktioniert in IE nicht!
Hallo zusammen,
ich habe für unseren Online-Shop ein dynamisches Menü mit CSS erstellt, welches sowohl nach unten als auch zur seite ausklappt, das klappt alles auch wunderbar, solange ich die Seite im Firefox, oder einem andern Browser, als den IE lade. Irgendwie versuche ich nun schon seit gestern, dieses Menü für den IE8 und möglichst noch für den IE7 kompatibel zu bekommen. Leider bin ich weder durch googlen noch bei der Suche in diversen Foren nicht fündig geworden, bzw konnte ich die aufgeführten Lösungsansätze so nicht umsetzen, weil ich Sie nicht so ganz verstehe. Nun bin Ich maximal verwirrt und weiß nicht mehr so ganz weiter, habe mir HTML und CSS selber beigebracht und bin nicht so der Oberchecker. Ich wäre euch sehr dankbar, wenn mir jemand auf die Sprünge helfen könnte Hier wäre der HTML-Code: HTML-Code:
<head> <title>navigation links</title> <link rel="stylesheet" type="text/css" href="nav_neu_shop_links.css"> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("nav").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "silver"; } function ausblenden() { sucheUL(this.firstChild).style.display = "none"; } window.onload=hoverIE; } </script> </head> <body> <ul id="nav"> <li class="level_2"> <a class="kategorie_link" href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html"> Drucker & Co. </a> <ul class="sub"> <li class="top new"> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html" class="new_child"> Farblaserdrucker </a> <ul style="width: 420px;"> <li class="title"> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker-de_DE651680.html">Alle Hersteller</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/brother-de_DE651713.html">Brother</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/epson-de_DE4864624.html">Epson</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/hp-de_DE651724.html">Hewlett-Packard</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/konica-minolta-de_DE651687.html">Konica Minolta</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/kyocera-de_DE651721.html">Kyocera</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/oki-de_DE651729.html">Oki</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/ricoh-de_DE1179333.html">Ricoh</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/farblaserdrucker/samsung-de_DE651733.html">Samsung</a> </li> </ul> </li> <li class="level_2"> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker-de_DE651682.html" class="new_child"> Laserdrucker </a> <ul style="width: 420px;"> <li class="title"> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker-de_DE651682.html">Alle Hersteller</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/brother-de_DE651715.html">Brother</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/canon-de_DE651739.html">Canon</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/epson-de_DE4878661.html">Epson</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/hp-de_DE651723.html">HP</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/kyocera-de_DE651722.html">Kyocera</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/lexmark-de_DE651728.html">Lexmark</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/oki-de_DE651731.html">Oki</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/ricoh-de_DE1395730.html">Ricoh</a> </li> <li> <a href="http://www.printer-care.de/shop/drucker-co-/s-w-laserdrucker/samsung-de_DE651735.html">Samsung</a> </li> </ul> </li> </ul> </body> Code:
#nav { height: 30px; list-style: none outside none; margin: 0; padding: 0; position: relative; width: 172px; z-index: 500; } #nav li a.kategorie_link { background: none repeat scroll 0 0 #CCCCCC; color: #323232; cursor: pointer; display: block; float: left; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; padding: 0 10px; text-decoration: none; width: 150px; } #nav li:hover a.kategorie_link, #nav li.hover a.kategorie_link { background: none repeat scroll 0 0 #CCCCCC; position: relative; } #nav li a.kategorie_link span { background: url("") no-repeat scroll -995px -339px transparent; display: block; float: left; height: 29px; width: 15px; } #nav li:hover a.kategorie_link span, #nav li.hover a.kategorie_link span { background: url("") no-repeat scroll -520px -147px transparent; display: block; float: left; height: 29px; width: 15px; } #nav li.level_2, #nav li.new { background: url("") repeat-x scroll 0 29px #4B4B4B; border-bottom: 1px solid #FFFFFF; display: block; float: left; width: 170px; } #nav li.new { background: url("") no-repeat scroll 100% 100% #4B4B4B; } #nav li:hover, #nav li.hover { position: relative; } #nav li:hover ul.sub, #nav li.hover ul.sub { background: none repeat scroll 0 0 #323232; border-top: 1px solid #FFFFFF; left: 0; padding: 0; top: 30px; width: 170px; } #nav li:hover ul.sub li, #nav li.hover ul.sub li { color: #000000; display: block; float: left; font-weight: normal; height: 29px; position: relative; width: 170px; } #nav li:hover ul.sub li li, #nav li.hover ul.sub li li { border-top: 1px solid #DDDDDD; height: 29px; margin: 0 10px; } #nav li ul.sub li li.title { color: #4B4B4B; display: block; font-size: 12px; font-weight: bold; height: 42px; margin: 0; width: 100%; } #nav li:hover ul.sub li.title, #nav li.hover ul.sub li.title { border: 0 none; } #nav li:hover ul.sub li a, #nav li.hover ul.sub li a { color: #323232; display: block; height: 29px; line-height: 29px; overflow: hidden; padding: 0 10px; font-size: 12px; text-decoration: none; width: 170px; } #nav li ul.sub li a.new_child { background: none repeat scroll 0 0 transparent; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-size: 12px; font-weight: normal; overflow: visible; } #nav li:hover ul.sub li a:hover, #nav li.hover ul.sub li a.hover { background: none repeat scroll 0 0 transparent; font-size: 12px; text-decoration: underline; z-index: 1; } #nav li:hover ul.sub li a.new_child:hover, #nav li.hover ul.sub li a.new_child:hover { background: url("") no-repeat scroll 0 -1px transparent; color: #FFFFFF; text-decoration: none; width: 150px; z-index: 9999; } #nav li:hover li:hover ul, #nav li.hover li.hover ul { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #A0A0A0; left: 170px; padding: 20px; position: absolute; top: -35px; width: 1px; } #nav ul, #nav li:hover ul ul, #nav li.hover ul ul { left: -9999px; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: -9999px; z-index: 1; } #nav li:hover ul ul, #nav li.hover ul ul { position: relative; } #nav li:hover li:hover a.new_child, #nav li.hover li.hover a.new_child { background: url("../img/navigation/arrow_hover.png") no-repeat scroll 0 -1px transparent; color: #FFFFFF; position: absolute; width: 150px; z-index: 99999; } |
Sponsored Links |
|
|||
Hallo,
habe mal so bei mir getestet ab IE 7 alles i.o. Code:
html, body, ul, li, a, span { margin: 0; padding: 0; } html { height: 100%; } body { font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; /* fuer IE 5 */ } ul#nav { height: 30px; list-style: none outside none; position: relative; width: 172px; z-index: 500; text-align: left; } Roland |
Sponsored Links |
|
|||
Hallo Roland,
erstmal vielen Dank für deine Antwort, leider kann ich erst jetzt schreiben, da ich die letzten zwei Wochen im Urlaub war und hier dann erstmal das Tagesgeschäft aufarbeiten musste! Habe den von dir getesteten Code nun so ziemlich an jeder möglichen Stelle probiert einzufügen, aber immer noch ohne Erfolg! Ich verstehe auch ehrlich gesagt nicht so ganz, an welcher Stelle du ihn eingefügt hast??? Könntest du mir, falls das nicht zuviel Aufwand macht, nochmal den gesamten Code (CSS und HTML), welchen du erfolgreich getestet hast, posten? Vielleicht verstehe ich dann auch wo der Fehler in meinem Code liegt Grüße Micha |
|
|||
Du schreibst einfach an den Anfang deiner CSS-Datei folgendes:
Code:
body, * { margin: 0; padding: 0; } Danach fügst du dem Selektor #nav die Definition Code:
text-align: left; MfG |
|
|||
ok, das mit dem selektor * habe ich verstanden!
Aber irgendwie ändert das nichts daran, daß mein IE das nicht richtig darstellt, kann es sein, daß der IE aufgrund seiner Einstellungen Probleme mit der Darstellung bzw. der Funktion hat. Habe allerdings nichts am IE selber verändert, da ich Ihn nicht benütze ich poste nochmal die geänderte css, den html code habe ich seither nicht verändert (hätte ich das tun sollen?) Code:
* { margin: 0; padding: 0; } #nav { height: 30px; list-style: none outside none; position: relative; width: 172px; z-index: 500; text-align: left; } #nav li a.kategorie_link { background: none repeat scroll 0 0 #CCCCCC; color: #323232; cursor: pointer; display: block; float: left; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; padding: 0 10px; text-decoration: none; width: 150px; } #nav li:hover a.kategorie_link, #nav li.hover a.kategorie_link { background: none repeat scroll 0 0 #CCCCCC; position: relative; } #nav li a.kategorie_link span { background: url("") no-repeat scroll -995px -339px transparent; display: block; float: left; height: 29px; width: 15px; } #nav li:hover a.kategorie_link span, #nav li.hover a.kategorie_link span { background: url("") no-repeat scroll -520px -147px transparent; display: block; float: left; height: 29px; width: 15px; } #nav li.level_2, #nav li.new { background: url("") repeat-x scroll 0 29px #4B4B4B; border-bottom: 1px solid #FFFFFF; display: block; float: left; width: 170px; } #nav li.new { background: url("") no-repeat scroll 100% 100% #4B4B4B; } #nav li:hover, #nav li.hover { position: relative; } #nav li:hover ul.sub, #nav li.hover ul.sub { background: none repeat scroll 0 0 #323232; border-top: 1px solid #FFFFFF; left: 0; padding: 0; top: 30px; width: 170px; } #nav li:hover ul.sub li, #nav li.hover ul.sub li { color: #000000; display: block; float: left; font-weight: normal; height: 29px; position: relative; width: 170px; } #nav li:hover ul.sub li li, #nav li.hover ul.sub li li { border-top: 1px solid #DDDDDD; height: 29px; margin: 0 10px; } #nav li ul.sub li li.title { color: #4B4B4B; display: block; font-size: 12px; font-weight: bold; height: 42px; margin: 0; width: 100%; } #nav li:hover ul.sub li.title, #nav li.hover ul.sub li.title { border: 0 none; } #nav li:hover ul.sub li a, #nav li.hover ul.sub li a { color: #323232; display: block; height: 29px; line-height: 29px; overflow: hidden; padding: 0 10px; font-size: 12px; text-decoration: none; width: 170px; } #nav li ul.sub li a.new_child { background: none repeat scroll 0 0 transparent; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-size: 12px; font-weight: normal; overflow: visible; } #nav li:hover ul.sub li a:hover, #nav li.hover ul.sub li a.hover { background: none repeat scroll 0 0 transparent; font-size: 12px; text-decoration: underline; z-index: 1; } #nav li:hover ul.sub li a.new_child:hover, #nav li.hover ul.sub li a.new_child:hover { background: url("") no-repeat scroll 0 -1px transparent; color: #FFFFFF; text-decoration: none; width: 150px; z-index: 9999; } #nav li:hover li:hover ul, #nav li.hover li.hover ul { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #A0A0A0; left: 170px; padding: 20px; position: absolute; top: -35px; width: 1px; } #nav ul, #nav li:hover ul ul, #nav li.hover ul ul { left: -9999px; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: -9999px; z-index: 1; } #nav li:hover ul ul, #nav li.hover ul ul { position: relative; } #nav li:hover li:hover a.new_child, #nav li.hover li.hover a.new_child { background: url("../img/navigation/arrow_hover.png") no-repeat scroll 0 -1px transparent; color: #FFFFFF; position: absolute; width: 150px; z-index: 99999; } |
|
||||
Ich sehe gerade, in dem oben angegebenen HTML fehlt noch ein DocType. Das versetzt den IE in den Quicksmode und der macht gerne Probleme.
Ganz oben eingeben: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
WOW!
Jetzt funktioniert es tatsächlich, lag wohl wirklich an dem DOCTYPE, jetzt frag ich mich aber ... hätte es nach Einbindung in den Shop nicht auch funktioniert, da in der übergeordneten HTML-Datei auch ein DOCTYPE steht Vielen Dank für euren Einsatz |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü | MadBall | CSS | 3 | 21.03.2010 04:04 |
CSS Menü zickt rum /IE6/IE7/FF | GizmotroniX | CSS | 3 | 11.07.2007 09:14 |
dtd und css in php funktioniert im IE nicht!!! | da-lick | CSS | 17 | 09.06.2007 16:44 |
CSS Menü Problem | dieBille | CSS | 4 | 22.02.2006 16:43 |
problem mit dem css menü | nevermind | CSS | 72 | 11.10.2005 17:31 |