 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Issy
Threadersteller
Dabei seit: 12.07.2008
Ort: -
Alter: 35
Geschlecht: 
|
Verfasst Mi 16.09.2009 17:53
Titel IE Fehler bei DropDown Menü |
  |
|
Hola,
ich stehe momentan vor einem äusserst nevigen Problem, das wie so oft nur im Internet Explorer 7 und 8 auftritt und in Firefox und Konsorten einwandfrei funktioniert.
Und zwar folgendes:
Ich habe in Typo3(TemplaVoila) mit Hilfe dieses Blogeintrages: http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue.html ein DropDown Menü mit 3 Ebenen ins Layout eingebaut.
Prinzipiell funktioniert das auch sehr gut, jedoch im Internet Explorer werden beim Hover Effekt wohl bei allen Punkten, die noch eine weitere Ebene haben, ein gemeiner und unnützer Abstand von ca. 3,4 Pixel unterhalb des Links angezeigt.
Ich hab von dem Ganzen mal ein Screenshot gemacht: http://www.fractal-deutschland.de/fileadmin/templates/screenshot.jpg
Das passiert nur bei Menüpunkten mit mehreren Ebenen.
Hier mein Code fürs Menü:
| Code: | ul.menu, ul.menu ul {
list-style-type: none;
}
ul.menu a {
display: block;
padding: 6px 23px 6px 23px;
font-weight:bold;
color: white;
font-size: 12px;
}
ul.menu li {
padding: 0;
margin: 0;
float: left;
background-image: url(http://www.fractal-deutschland.de/fileadmin/templates/navitop.gif);
height: 30px;
}
/* Fuer Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
background-image: url(http://www.fractal-deutschland.de/fileadmin/templates/unterpunkt.png);
float:none;
background-color: transparent;
height: 25px;
}
ul.menu ul li a:hover {
background-color: #FF0000;
}
ul.menu ul li a {
font-weight:normal;
font-size: 11px;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe aendern */
ul.menu ul li.hover, ul.menu ul li:hover {
background-color: #FF0000;
}
/* Zweite Ebene */
ul.menu ul {
margin:0;
padding: 0;
position: absolute;
border: 1px solid #FFF9E4;
display: none;
width: 230px;
}
/* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
/* Dritte Ebene */
ul.menu li.hover ul ul, ul.menu li:hover ul ul {
display: none;
margin-left: 160px; /* Breite eines Listenelements - Ueberlagerung */
margin-top: -20px; /* Hoehe eines Listenelements */
}
/* Dritte Ebene anzeigen */
ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene */
ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
display: none;
}
/* Vierte Ebene anzeigen */
ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
display: block;
} |
Die Seite ist erreichbar unter: http://fractal-deutschland.de/profil-template.html
Hat jemand irgend eine Idee für die Lösung des Problems? Ich häng da schon ewig dran und raste bald aus.
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 16.09.2009 21:20
Titel
|
|
|
Als erstes verwende einen Doctype, der den IE (inkl. 8!) nicht im Quirksmode rendern lässt. Außerdem hast Du eine enorme JS-Redundanz - verwende http://htmldog.com/articles/suckerfish/dropdowns/ (nur der IE < 7 braucht das und bekommt es per CC) und wirf die unzähligen Event-Handler raus. Auch nicht gut: Deine height-Deklarationen für li - bei Textzoom läuft vert. alles ineinander, also würde ich height für alle Ebenen rauswerfen.
Zum eigentlichen Problem: Der Abstand hat mit dem sog. Whitespace-Bug zu tun und wird beseitigt, indem die li der Subnavi weiterhin floaten - dafür bekommen sie width: 100%; statt float: none;. Allerdings am besten nur für den IE < 8! Außerdem solltest Du unbedingt padding-bottom: 0; für a aus Deinem IE-CSS werfen 
Folgendes würde ich aber stattdessen hineinschreiben (nur für IE < 8 ):
- für a ist hasLayout sinnvoll: Bei der ersten Ebene durch float: left;, und bei den Ebenen darunter mit zoom: 1; (float wird dort natürlich zurückgesetzt). Die Gründe für die unterschiedlichen Verfahrensweisen zu erklären ist mir jetzt zu mühsam
- der IE hat bei pos. abs. gerne Offsets, gib der Subnavi also top & left und ihrem Elternelement li pos. rel. (am besten erst beim Hovern, wegen des verqueren Stacking Context des IE).
Zuletzt bearbeitet von heiko_rs am Mi 16.09.2009 21:26, insgesamt 6-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Issy
Threadersteller
Dabei seit: 12.07.2008
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Do 17.09.2009 12:51
Titel
|
|
|
Vielen Dank für die schnelle Hilfe, das Ganze klappt jetzt einwandfrei!
Und danke für den Hinweiß mit dem doctype, eigentlich war der in der Template Datei schon vorhanden aber templavoila hat ihn auskommentiert, habs jetzt mit typoscript eingefügt. Um die JS Geschichte werd ich mich noch kümmern :>
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Dropdown Menü
JavaScript-Dropdown-Menü
Dropdown als Dropup Menü
CSS Javascript Dropdown menü
[FLASH] DropDown Menü
DropDown Menü verschwindet
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
