IE interpretiert anscheinend :hover nicht für Listenelemente
joomlander
- css
wunderschönen Tag,
Ich habe mir ein Template für das Content-Manage-System Joomla gebaut.
Das darin enthaltene MainMenu habe ich mir mittels css zu einem horizontalen Aufklapp-Menü umformatiert. Da werden die Untermenüs (li ul) beim Überfahren eines Menüpunktes (li) mit der Maus (:hover) angezeigt. Das funktioniert in fast allen Browsern wunderbar. Nur der IE macht da nicht mit. Das gilt sowohl, wenn ich eine reine html-Seite mit den css-Verweisen, mit einem Test-Menü, direkt im Browser öffne als auch wenn die Seite direkt auf dem Server von Joomla erzeugt wird.
Der InternetExplorer bis zur Version 8 interpretiert Pseudoklassen wie :hover ausschließlich für Verweise (a). Außerdem kennt er den Kindselektor > nicht, was bei weiteren Unterebenen unpraktisch wird. Das Untermenü ist aber kein Nachfahre von a sondern von ul li.
Wie kann ich dem IE nun ganz ohne ECMA-script beibringen, dass er das Untermenüs während des Mauskontaktes anzeigen soll.
Dem Menü habe ich in joomla bzw. in der html-Datei die ID "MyMenu" zugewiesen.
Hier ist das css dazu:
ul#MyMenu li a:hover {
background: red;
color: #ffffff;
}
ul#MyMenu li a:active, ul#MyMenu li a:focus{
border: 2px inset #cfb948;
}
ul#MyMenu li ul {
float: none;
clear: both;
border-style: none;
position: relative;
top: 0;
display: none;
z-index:2;
background-image: url(../images/submenu_bg.jpg);
opacity: 1;
}
ul#MyMenu li:hover ul, ul#MyMenu li:active ul, ul#MyMenu li:focus ul {
display: block;
overflow: visible;
min-height: 25px;
}
ul#MyMenu li:hover ul li, ul#MyMenu li:active ul li, ul#MyMenu li:focus ul li {
display: block;
position: relative;
float: none;
clear: both;
width: 150px;
margin: 0;
}
ul#MyMenu li ul li>a {
position: absolute;
}
Mein Vereinskollege hat die Seite des wegen übereifrig gleich offline gestellt. Daher wird ein link dazu nichts nützen. Aber es funktioniert im Prinzip wie [url=http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm]hier[/url][url=http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm][/url]
Ich versteh nicht warum das da auch im IE funzt aber bei mir nicht. Weiß da jemand Rat? Vielen Dank schon mal.
viele Grüße
SI
Hallo,
Der InternetExplorer bis zur Version 8 interpretiert Pseudoklassen wie :hover ausschließlich für Verweise (a).
das ist nicht wahr, ab Version 7 kann er :hover auch für andere Elemente anwenden.
Außerdem kennt er den Kindselektor > nicht
Kann er AFAIK ab Version 7 auch.
Deine Beschreibung bzw. dein Eindruck lassen vermuten, dass du den IE im Quirksmode betreibst (DOCTYPE fehlt oder ist unvollständig, oder nicht in der ersten Zeile). Dann verhält er sich weitgehend wie ein IE5 und ahmt auch den größten Teil von dessen Schwächen nach. Das ist gewollt.
So long,
Martin
vielen Dank für die schnelle Antwort.
Meine Doctype-Zeile sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Darunter steht noch:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Die Sprache wird damit von joomla aus per php gesteuert.
Was ist da falsch? Wie stelle ich den Quirksmode per html ab?
Deine Beschreibung bzw. dein Eindruck lassen vermuten, dass du den IE im Quirksmode betreibst (DOCTYPE fehlt oder ist unvollständig, oder nicht in der ersten Zeile). Dann verhält er sich weitgehend wie ein IE5 und ahmt auch den größten Teil von dessen Schwächen nach. Das ist gewollt.
So long,
Martin
Hi,
Meine Doctype-Zeile sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
das sieht korrekt aus. Und davor? Steht davor etwa noch eine XML-Deklaration?
Darunter steht noch:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Das hat aber mit dem Problem nichts zu tun.
Was ist da falsch? Wie stelle ich den Quirksmode per html ab?
Hab ich doch schon erklärt:
(DOCTYPE fehlt oder ist unvollständig, oder nicht in der ersten Zeile)
Ciao,
Martin
Hi,
Meine Doctype-Zeile sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
das sieht korrekt aus. Und davor? Steht davor etwa noch eine XML-Deklaration?
Nö, das ist die erste Zeile.
Im Header steht dann noch:
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
Hat das einen Einfluss?
Gibt es nicht auch eine Quirxmode-Lösung für dieses Problem? Schließlich sollen ja idealerweise auch die IE<7-Benutzer die Seite richtig benutzen können und angezeigt bekommen.
Hi,
Gibt es nicht auch eine Quirxmode-Lösung für dieses Problem?
Nein.
Der Quirksmode ist dazu da, spätere IE-Versionen die Fehler der früheren imitieren zu lassen, zwecks Abwärtskompabilität.
Und einer der Fehler dieser früheren Versioen (<= 6) ist es, :hover nur auf Links umzusetzen.
Wenn du eine Lösung haben willst, die auch in diesen noch das gewünschte Verhalten erzeugt, dann musst du mit JavaScript (direkt, oder in Form von CSS-Expressions oder Behaviours) nachhelfen. Und dann solltest du immer noch einen Fallback vorsehen, falls diese nicht zur Verfügung stehen, weil JavaScript deaktiviert ist.
MfG ChrisB
Hi,
Und einer der Fehler dieser früheren Versioen (<= 6) ist es, :hover nur auf Links umzusetzen.
Wenn du eine Lösung haben willst, die auch in diesen noch das gewünschte Verhalten erzeugt, dann musst du mit JavaScript (direkt, oder in Form von CSS-Expressions oder Behaviours) nachhelfen. Und dann solltest du immer noch einen Fallback vorsehen, falls diese nicht zur Verfügung stehen, weil JavaScript deaktiviert ist.
Na gut vielleicht mach ich das später noch mit ECMA-script. Im Moment wäre ich froh, wenn es wenigstens mit den IE-Versionen 7 und 8 funktionieren würde.
Kann ich nun davon ausgehen, dass ich nach meinen obigen Angaben zufolge keinen Quirxmode aktiviert habe?
Grüße
Joomlander
Hi,
Kann ich nun davon ausgehen, dass ich nach meinen obigen Angaben zufolge keinen Quirxmode aktiviert habe?
Kannst du überprüfen, in dem du
javascript:alert(document.compatMode)
in der Adresszeile eingibst.
Im QuirksMode sollte die Ausgabe "BackCompat" (o.ä.) lauten, im standardkonformen Modus "CSS1Compat".
MfG ChrisB
Hi,
Vielen Dank
Also löst meine Seite anscheinend den Quirksmodus aus. Wie kann ich das verhindern? Mein Doctype ist doch korrekt oder?
Kannst du überprüfen, in dem du
javascript:alert(document.compatMode)
in der Adresszeile eingibst.Im QuirksMode sollte die Ausgabe "BackCompat" (o.ä.) lauten, im
standardkonformen Modus "CSS1Compat".
MfG Joomlander
[latex]Mae govannen![/latex]
Also löst meine Seite anscheinend den Quirksmodus aus. Wie kann ich das verhindern? Mein Doctype ist doch korrekt oder?
IE geht nicht nur bei XML-Vorspann oder anderen sichtbaren Zeichen in den Quirksmidus, sondern auch bei "unsichtbaren" Zeichen.
Insofern solltest du überprüfen, ob vor dem eigentlichen Dokument ein BOM gesendet wird und diese ggf. mit einem fähigen Editor ( notepad++ z.B.) als UTF-8 ohne BOM abspreichern.
Das dürfte die häufigste Ursache sein.
Cü,
Kai
Hallo nochmal,
Jetz hab ich herausgefunden, dass folgende auskommentierte php-Anweisung am Anfang der index.php stand.
<!--<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>-->
Das wird gar nicht in allen Editoren angezeigt. Deshalb dachte ich vor dem Doctype steht nix. Wahrscheinlich löst das den Quirks-Modus beim IE8 aus. Aber das kann kann ich nicht verhindern. Das hab ich gelöscht und schon zeigt mir der IE "CSS1Compat" an und mein Menü funzt nun im IE8. Zwar mit ein paar unschönen Darstellungsfehlern aber es funktioniert. Vielen Dank.
IE geht nicht nur bei XML-Vorspann oder anderen sichtbaren Zeichen in den Quirksmidus, sondern auch bei "unsichtbaren" Zeichen.
Insofern solltest du überprüfen, ob vor dem eigentlichen Dokument ein BOM gesendet wird und diese ggf. mit einem fähigen Editor ( notepad++ z.B.) als UTF-8 ohne BOM abspreichern.Das dürfte die häufigste Ursache sein.
Cü,
Kai
Das wird gar nicht in allen Editoren angezeigt.
was heißt in Editoren? Du hättest einfach im Browser nachschauen müssen/sollen. Nur dort kannst du erfahren, was im Browser angekommen ist.
Struppi.