|
|||
Drop-down Menü in allen Browsern (IE7/6, FF, Opera) anders (und falsch) dargestellt
Hallo,
Ich bin nicht mehr blutig, aber immer noch ein Anfänger. In allen von mir getesteten Browsern wird das Dropdown-Menü anders dargestellt. Dabei produzieren alle unterschiedliche Fehler: 1.) Der Firefox (Version 2.0.0.11) zeigt das Menü zu weit links (es sollte bündig mit der Sidebar sein). Irgendwie bleibt die <ul> nicht in der div-Box drin... 2.) Die IEs (7.0 und 6.0) zeigen das Untermenü von Kontakt rechts daneben an statt darunter und liegen damit unangenehm über den weiteren Menüpunkten. Hier hatte ich schon versucht, die innere <ul> zu clearen, aber ohne Erfolg Zudem zeigt der IE6 das gleiche Verhalten wie der Firefox sobald man mit der Maus über einen der Links läuft. 3.) Im Opera (Version 9.25) ist die Anzeige so wie sie sein sollte. Problem ist, dass die Unterpunkte von Kontakt nicht mehr klickbar sind, sobald die Maus über dem Inhaltsbereich (#main) ist, obwohl das Menü sichtbar darüber liegt...Den Navigationsbereich so gross zu machen, dass auch die ausgeklappten Untermenüs noch darin Platz finden funktioniert zwar, ist aber inakzeptabel. Das gekürzte html: Code:
<body> <div id="pagewrapper"> <div id="content"> <div id="topnavi"> <ul> <li class="currentpage">Startseite</li> <li><a href="aktuelles.php">Aktuelles</a></li> <li><a href="kontakt.php">Kontakt</a> <ul> <li><a href="email.php">EMail schreiben</a></li> <li><a href="weg.php">Wegbeschreibung</a></li> </ul> </li> <li><a href="impressum.php">Impressum</a></li> <li><a href="wir.php">Wir über Uns</a></li> </ul> </div> <div id="sidebar"> </div> <div id="subcontent"> </div> <div id="main"> </div> </div> </div><!-- #pagewrapper --> </body> Code:
/* CSS für das Drop-down Menü ********************************/ #topnavi { padding: 0.5em 0% 0.5em 22%; overflow: hidden; } #topnavi ul { background-color: #4242C9; list-style: none; min-height: 1px; } #topnavi li ul { width: 11em; position: absolute; top: auto; display: none; margin-top: 0.6em; clear: both; } #topnavi li { float: left; padding: 0.5em; } #topnavi li a{ padding: 0.5em; text-decoration: none; } #topnavi .currentpage { padding: 0.5em; float: left; } #topnavi li li { width: 11em; padding: 0em; margin-left: 0px; margin-top: -1px; float: none; display: block; position: relative; } #topnavi li li a { width: 10em; display: block; } /*div#topnavi li:sfhover ul,*/ div#topnavi li:hover ul, div#topnavi ul li:hover ul, div#topnavi ul ul li:hover ul { display: block; } /* IE Hacks */ * html #topnavi ul, * html #topnavi li a { height: 1%; } /* weiteres CSS ********************************************/ div#content { margin: 0em auto 2em 0;/* some air above and under menu and content */ background-color: #B2B2B2; /* BG-color for sidebar+joboverview*/ } div#main { background-color: #EEF; /* Same BG-color as pagewrapper */ padding: 2em 2%; margin-left: 22%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */ margin-right: 22%; /* this will give room for subcontent to be on the right side, make sure this space is bigger than subconten width */ } div#sidebar { background-color: #B2B2B2; /* BG-color for sidebar+joboverview*/ float: left; /* set sidebar on the left side. Change to right to float it right instead. */ width: 22%; /* sidebar width, if you change this please also change #main margins */ display: inline; /* FIX IE double margin bug */ margin-left: 0; } div#subcontent{ font-size: 90%; background-color: #B2B2B2; /* BG-color for sidebar+joboverview*/ float: right; width: 22%; /* jobsummary width, if you change this please also change #main margins */ display: inline; /* FIX IE double margin bug */ margin-right: 0; } Die vollständige online-Version liegt hier: WSL - Software-Lösungen - Startseite Ich hoffe auf baldige Lösungen, egal ob nur zu einem der geschilderten Probleme oder zu allen. |
Sponsored Links |
|
|||
Ich halte overflow:hidden für #topnavi für gar keine gute Idee. Verwende eine andere Lösung zum Einschließen der Floats, Easyclearing wäre möglich.
Zur Position des Submenüs: Mach Positionsangaben für left und top. |
Sponsored Links |
|
||||
z.B. ältere Geckos können damit nicht umgehen: http://xhtmlforum.de/48975-testcase-...-und-alte.html
|
|
|||
Überleg doch mal. Du willst, dass dein Dropdownmenü aus dem Bereich heraushängt. Und was bewirkt overflow:hidden?
Ich bin sehr sicher, dass diese Angabe die Ursache für etliche deiner Probleme ist. Außerdem ist die overflow-Eigenschaft grundsätzlich nur mit Vorsicht zu verwenden, siehe Heikos Antwort. |
|
|||
OK, overflow war für die Probleme 1+3 verantwortlich:
die topnavi hat noch die Klasse clearfix bekommen und overflow is wech. Bleibt Problem 2 für den IE7 (IE6 schmiert mir nach den Änderungen immer ab...) Zu den Positionsangaben top, left zur inneren ul: Dazu müsste das umschliessende li aber zusätzlich zum "float: left" auch noch'n "position: relative" bekommen, oder? Geht das überhaupt, oder ist die oberste Menü-Ebene dann nur noch mit "display: inline" hinzukriegen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Drop Down menü Frage | xero | CSS | 16 | 20.06.2007 19:48 |
Drop down menü geht im IE 6 nicht | silverblack | CSS | 3 | 10.06.2007 21:36 |
Ultimate Drop Down Menu | Lestat | Ressourcen | 7 | 03.08.2005 17:21 |