|
|||
Unterschiedliche Anzeige im Firefox und IE!??!!?
Hallo zusammen.
Ich habe folgendes Problem. Ich lasse ein Menü generieren, welches eine Liste darstellt. Maximal sind eine Oberebene und drei Unterebenen vorgesehen. Alle Ebenen sind horizontal und die Unterebenen sind nicht sichtbar. Wenn ein Menüpunkt angeklickt wird, wird die Unterebene sichtbar. Das Problem ist, wenn die Unterpunkte sichtbar werden, verschieben sich die Punkte der oberen Ebene nach rechts. Das soll natürlich nicht passieren. Wenn ich jetzt position: absolute; verwende, dann wird der gewünschte Effekt im Firefox angezeigt. Im IE verschiebt sich die untere Ebene auf die obere. Hat jemand eine Lösung für mein Problem?? Hier der Link: Test-Navi Ich teste z.Z. auf Firefox 2.0.0.7 und IE7 Hier der Code meiner CSS-Datei: Code:
/*******************/ /* Für alle Ebenen */ /*******************/ a:link, a:visited, a:active, a:focus { text-decoration: none; font-weight: bold; color: #000; } a:hover { color: #F00; } /***********/ /* Ebene 1 */ /***********/ ul#nav1 { margin-top: 10px; } ul#nav1 li { float: left; margin: 0 20px 3px 0; } .ebene1_no ul { visibility: hidden; position: absolute; left: 0; } .ebene1_no a:link, .ebene1_no a:visited, .ebene1_no a:active, .ebene1_no a:focus { color: #CCC; } .ebene1_no a:hover { color: #F00; } .ebene1_act a:link, .ebene1_act a:visited, .ebene1_act a:active, .ebene1_act a:focus { color: #F00; } .ebene1_act ul li a:link, .ebene1_act ul li a:visited, .ebene1_act ul li a:active, .ebene1_act ul li a:focus { color: #000; } .ebene1_act ul li a:hover { color: #F00; } /***********/ /* Ebene 2 */ /***********/ ul#nav2 { margin-top: 5px; } ul#nav2 li { float: left; margin: 0 0 3px 0; } .ebene2_act a:link, .ebene2_act a:visited, .ebene2_act a:active, .ebene2_act a:focus { color: #000; } /***********/ /* Ebene 3 */ /***********/ ul#nav3 { } /***********/ /* Ebene 4 */ /***********/ ul#nav4 { } Gruß Holger Geändert von Schengo (16.10.2007 um 17:18 Uhr) Grund: Spezifikationen FF & IE |
Sponsored Links |
|
|||
Hat schon jemand eine Idee? Ich bekomm es einfach nicht hin.
Es sieht so aus, als ob der IE es so interpretiert, dass er das Untermenü in die gleiche Zeile rechts daneben setzt. Ich hasse diese Diskrepanzen der Browser |
Sponsored Links |
|
|||
Der IE kann kein position:absolute ohne left und top, er vertut sich in der statischen Position eines Elements ohne diese Offsets. Da man die left und top benötigt, erzwingt dies auch position:relative für das Elternelement.
Du verwendest id mehrfach. |
|
|||
Vielen Dank erstmal für deine Antwort.
Zitat:
Zitat:
|
|
|||
All deine Untermenüs haben denselben Personalausweis: nav2
Dies zeigt dir der Validator. Sicher, left:0 schiebt alles nach links. Aber auch, wenn das Elternelement position:relative bekommt? |
|
|||
Zitat:
Das erste "Problem" habe ich schonmal gelöst. Die Test verliefen gut; also ohne Fehlermeldung Zitat:
Wenn ich beispielsweise im Elternelement ebene1_act position:relative; setze und die darunter liegende Ebene ebene1_act ul position:absolute; left:0; top:20px; dann bleibt die erste Ebene zusammen, aber die darunter liegende wird nach jedem Leerzeichen (oder neuem Aufzählungspunkt) in die darunterliegende Spalte geschrieben. Aber wenigstens schonmal unter jedem dazugehörigen Oberpunkt. Die li-Elemente lassen sich nicht mehr floaten. Ich hoffe, das war jetzt nicht zu kompliziert. Hat vielleicht noch jemand eine Idee? Hier nochmal mein aktueller CSS-Code: Code:
/*******************/ /* Für alle Ebenen */ /*******************/ a:link, a:visited, a:active, a:focus, a:hover { text-decoration: none; font-weight: bold; color: #000; } a:hover, a:active, a:focus { color: #F00; } /***********/ /* Ebene 1 */ /***********/ ul#nav { margin-top: 10px; position: relative; } ul#nav li { float: left; margin: 0 20px 3px 0; } .ebene1_no ul { visibility: hidden; position: absolute; left: 0; top: 0; } .ebene1_no a:link, .ebene1_no a:visited { color: #CCC; } .ebene1_no a:hover, .ebene1_no a:active, .ebene1_no a:focus { color: #F00; } .ebene1_act { position: relative; } .ebene1_act ul { position: absolute; left: 0; top: 20px; } .ebene1_act a:link, .ebene1_act a:visited, .ebene1_act a:active, .ebene1_act a:focus { color: #F00; } .ebene1_act ul li a:link, .ebene1_act ul li a:visited, .ebene1_act ul li a:active, .ebene1_act ul li a:focus { color: #000; } .ebene1_act ul li a:hover { color: #F00; } /***********/ /* Ebene 2 */ /***********/ ul#nav ul li { float: left; margin: 0 0 3px 0; } .ebene2_act a:link, .ebene2_act a:visited, .ebene2_act a:active, .ebene2_act a:focus { color: #000; } /***********/ /* Ebene 3 */ /***********/ /***********/ /* Ebene 4 */ /***********/ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unterschiedliche Anzeige im Firefox | Guitarrero | CSS | 1 | 20.03.2009 00:29 |
Anzeige im IE okay, Firefox spinnt | Irgendwas | CSS | 5 | 18.09.2008 13:01 |
Unterschiedliche Anzeige bei Opera | kadees | CSS | 4 | 03.05.2006 20:50 |
Unterschiedliche Anzeige bei IE und Firefox? | smiley | CSS | 7 | 12.04.2006 21:33 |
unterschiedliche <p> interpretation von IE und firefox | simon2001 | CSS | 4 | 27.01.2006 17:31 |