CSS-Script klappt nicht im IE6
0 
MudGuard
0 
Patrick Andrieu
0 0 0 Patrick Andrieu
CSS-Script klappt nicht im IE6
Hi,
Ich habe ein kleines Problem.
Ich habe ein Dropdown-Menü in CSS aber im IE 6 wird dieses nicht korrekt angezeigt. Das Dropdown funktioniert gar nicht und manche Menüpunkte die mehrere Zeichen Haben werden manchmal sogar Mehrreihig angezeigt.
Im IE 7, Opera, Firefox etc. wird es korrekt angezeigt.
Hier das Script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Menü</title>
<style type="text/css">
body {
font: normal 12px sans-serif;
color: black; background-color: #808080;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: left;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0em; padding: 0;
}
* html ul#Navigation li {
margin-bottom: 0em;
}
*:first-child+html ul#Navigation li {
margin-bottom: 0em;
}
ul#Navigation li ul {
margin: 0; padding: 3px;
position: absolute;
top: 1.62em; left: 0em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul {
left: 0em;
lef\t: 0em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:white; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0em;
width: 140px;
}
ul#Navigation a, ul#Navigation span {
display: block;
padding: 0.2em 0em;
text-decoration: none; font-weight: bold;
border-left-color: white; border-top-color: white;
color: darkblue; background-color: #ffffff;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #5A77AD;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: white; background-color: #5A77AD;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: #5A77AD;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="#"> Menüpunkt 1; | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
<li><a href="URL"> Link 6</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 2 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 3 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 4 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 5 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 6 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 7 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
</ul>
</li>
<li><a href="#"> Menüpunkt 8 | </a>
<ul>
<li><a href="URL"> Link 1</a></li>
<li><a href="URL"> Link 2</a></li>
<li><a href="URL"> Link 3</a></li>
<li><a href="URL"> Link 4</a></li>
<li><a href="URL"> Link 5</a></li>
</ul>
</li>
</ul>
</body>
</html>
Ich hoffe ihr könnt mir weiter helfen denn den Fehler kann ich einfach nicht finden.
-
Hi,
ul#Navigation li:hover ul {
Im IE 6 KANN NICHT funktionieren. IE 6 ist zu blöd, :hover auf etwas anderes als Links (a-Elemente mit href-Attribut) anzuwenden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard!
Im IE 6 KANN NICHT funktionieren. IE 6 ist zu blöd, :hover auf etwas anderes als Links (a-Elemente mit href-Attribut) anzuwenden.
Aber auch IE7 hat so seine Probleme mit Hover (ich berichtete: Beispiel)
Für den sechser kann der OP eine JavaScript-Lösung basteln, so bleiben nur noch die IE6-User (die immer weniger werden) ohne JS (dürfen nicht allzu viele sein) außen vor...
Viele Grüße aus Frankfurt/Main,
Patrick--
Diblom
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?-
Naja, also der IE 7 macht da eigentlich keinen Stress. Der zeigt das Problemlos an.
Gibt es echt keine Methode das doch hinzubekommen und wenn nicht.
Kann man vielleicht Scripten, dass er am Anfang eine Browserabfrage macht und er User mit dem IE6 einfach abweist (z.B. Auf eine andere Seite verweist)
-
Hi,
Gibt es echt keine Methode das doch hinzubekommen
Klar: Mit Jscript ...
AFAIR gibt es auch allg. Behaviors als Workaround (eien Suche nach: behavior hover sollte helfen).
Kann man vielleicht Scripten, dass er am Anfang eine Browserabfrage macht und er User mit dem IE6 einfach abweist (z.B. Auf eine andere Seite verweist)
Wenn deine Seite so aufgebaut ist, daß sie auf eine Layout-Spielerei zwingend angewiesen ist, dann wäre es wohl eher angesagt, *dieses* viele gravierendere Manko zu beheben ...
Gruß, Cybaer
--
Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
(Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
-
[latex]Mae govannen![/latex]
Wenn deine Seite so aufgebaut ist, daß sie auf eine Layout-Spielerei zwingend angewiesen ist, dann wäre es wohl eher angesagt, *dieses* viele gravierendere Manko zu beheben ...
Stümmpt.
Man kann zum Beispiel (und sollte es mMn auch) als Fallback den übergeordneten Menüpunkt (der immer sichtbare) auf eine Übersichtsseite verlinken, auf der dann die einzelnen Unterseiten aufgelistet sind. Dann ist die Seite auch ohne CSS und/oder Javascript immer noch bedienbar.
Also 3-stufig:
- CSS-Hover
- Javascript-Hover für bestimmte Browser
- Verlinkung der Oberkategorie(n) zu Übersichtsseite(n)Cü,
Kai
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
-
-
Hallo Global!
Kann man vielleicht Scripten, dass er am Anfang eine Browserabfrage macht und er User mit dem IE6 einfach abweist (z.B. Auf eine andere Seite verweist)
Wenn Du überlegst, ohnehin zu »scripten«, dann bastel Dir so ein Skript, das den Hover-Effekt für IE 6 realisiert.
Ansonsten, siehe Cybaers Antwort, letzter Absatz.
Viele Grüße aus Frankfurt/Main,
Patrick--
Diblom
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
-
-
-
