nicht angemeldet
CSS Navigation funktioniert nicht in IE, wenn Bild darunter
Hallo zusammen,
ich versuche mich jetzt schon seit Tagen daran, das Problem zu lösen, aber ich packs nicht. Ich habe mir eine Pull-Down Navigationsleiste mit CSS gebastelt. Unter dieser Leiste sollen dann die eigentlichen Seiteninhalte stehen. Sobald das Pulldown aber über ein Bild geht und ich mit der Maus daghin navigieren möchte, verschwindet das Pulldown.
Das Problem tritt aber nur im Internet Explorer auf. Im Mozilla Firefox klappt das ohne Probleme.
Könnt ihr mir bitte helfen?
Ich habe mal den Code etwas zusammengeschrumpft:
HTML Seite:
<!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>Some Title</title>
<link rel='stylesheet' type='text/css' href='styles2.css'>
</head>
<body>
<table style='background-image: url(Hintergrund2.jpg);' align='center' border='0' height='130' width='1000'><tr><td></td></tr></table>
<div id="Rahmen">
<ul id="Navigation">
<li><a href="#Beispiel">Aktuelles</a></li>
<li><a href="#Beispiel">Thema1</a>
<ul class="Untermenu1">
<li><a href="Urlaub.php?page=1">Thema 1.1</a></li>
<li><a href="Urlaub.php?page=2">Thema 1.2</a></li>
<li><a href="#Beispiel">Thema 1.3</a></li>
<li><a href="#Beispiel">Thema 1.4</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema2</a>
<ul>
<li><a href="#Beispiel">Thema 2.1</a></li>
<li><a href="#Beispiel">Thema 2.2</a></li>
<li><a href="#Beispiel">Thema 2.3</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 3</a>
<ul>
<li><a href="#Beispiel">Thema 3.1</a></li>
<li><a href="#Beispiel">Thema 3.2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 4</a>
<ul class="Untermenu4">
<li><a href="#Beispiel">Thema 4.1</a></li>
<li><a href="#Beispiel">Thema 4.2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Thema 5</a></li>
<li><a href="#Beispiel">Thema 6</a></li>
</ul>
<div id="inhalt"><img src="Hintergrund2.jpg" /></div></div>
</body>
</html>
Und das dazugehörige CSS:
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #FFFCC7;
}
div#Rahmen {
width: 1000px;
padding: 0.8em;
border: 0px solid black;
background-color: #FFFCC7;
margin-left: auto;
margin-right: auto;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.1em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.9em; left: -0.1em;
display: none; /* Unternavigation ausblenden */
z-index: 10;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li a{
float: none;
display: block;
width: 100%;
margin: 0;
margin-top: 0.1em; margin-bottom: 0.0em;
}
ul#Navigation li ul li {
float: none;
display: block;
width: 100%;
margin: 0;
margin-top: 0em; margin-bottom: 0.1em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.23em 0.97em 0.17em 1.03em;
border: 1px solid #FFFCC7;
border-left-color: #FFFCC7; border-bottom-color: #220F72;
color: white; background-image: url(button2.jpg);
}
* 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:hover {
padding: 0.17em 1.03em 0.23em 0.97em;
border-color: #200270;
border-left-color: #200270; border-top-color: #200270;
background-image: url(button2_hover.jpg);
background-color: #FFFCC7;
color: #200270;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
ul.Untermenu1 {
display:block;
width: 300px;
}
ul.Untermenu4 {
display: block;
width: 170px;
}
Vielen Dank schonmal!!
Viele Grüße
Kirin
-
Om nah hoo pez nyeetz, Kirin!
w\idth: 47.1em;
Ohne eine Lösung für dein Problem anzubieten: den IE5.5 kannst du getrost vernachlässigen.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz, Kirin!
Sobald das Pulldown aber über ein Bild geht und ich mit der Maus daghin navigieren möchte, verschwindet das Pulldown.
<div id="inhalt"><img src="Hintergrund2.jpg" /></div></div>
Meinst du das Bild Hintergrund2? Falls ja, handelt es sich sicher um ein Hintergrundbild. Hintergrundbilder gehören ins CSS. Dies möglicherweise sogar für das body-Element.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hallo Matthias,
Sobald das Pulldown aber über ein Bild geht und ich mit der Maus daghin navigieren möchte, verschwindet das Pulldown.
<div id="inhalt"><img src="Hintergrund2.jpg" /></div></div>
Meinst du das Bild Hintergrund2? Falls ja, handelt es sich sicher um ein Hintergrundbild. Hintergrundbilder gehören ins CSS. Dies möglicherweise sogar für das body-Element.
Ja, genau das Bild meine ich. Statt dem <img />-Tag steht dort normalerweise ein PHP-Script, was je nach angeklicktem Link in der Navigation eine andere PHP-Datei inkludiert.
In dieser ist dann die Überschrift mit Photoshop erstellt und als Bild eingebunden. Und wegen dieser Bilder kann ich das Pulldown nicht bedienen, da es dann immer verschwindet.
Man kann ja aber nun schlecht für jedes PHP-Script einen Eintrag im Stylesheet machen, oder?
Wie müsste ich das denn dann schreiben?Viele Grüße
Kirin-
Om nah hoo pez nyeetz, Kirin!
wenn ich deine Beschreibung der Symptome richtig verstehe, solltest du dich mit z-index beschäftigen.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hallo Matthias,
wenn ich deine Beschreibung der Symptome richtig verstehe, solltest du dich mit z-index beschäftigen.
Das habe ich schon. Die Navigation 'ul#Navigation li ul' hat schon z-index: 10 und wenn ich dem Bild eine 1 gebe, ändert sich an dem Problem gar nichts. Von der Anzeige her, ist das Bild ja dahinter. Nur die Funktionalität des Pulldowns klappt nicht, wenn ein Bild dahinter liegt. :/
Viele Grüße
Kirin
-
-
-
-
Keiner mehr eine Idee? Also es hängt nicht an den Buttons in der Navigationsleiste, eher an den Abständen dazwischen. Also beim Bewegen der Maus von dem 2. Subthema zum 3. Subthema, denkt sich der IE, dass das Bild dahinter wichtiger ist, und blendet das Pulldown aus.
Wenn man es mit Glück einmal zum 3. Subthema geschafft hat mit der Maus, dann bleibt das Pulldown auch da - nur der Übergang ist das Problem.
Viele Grüße
Kirin-
Om nah hoo pez nyeetz, Kirin!
... denkt sich der IE, dass das Bild dahinter wichtiger ist, und blendet das Pulldown aus.
wahrscheinlich wird es so sein, dass einfach die Pseudoklasse :hover nicht mehr zutreffend ist. Ältere IE können diese zudem nur auf a-Elemente anwenden. Im Wiki gibt es eine barrierearme Multilevel-Navigation. Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-