XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   hovereffekt in IE nicht sichtbar (http://xhtmlforum.de/showthread.php?t=41665)

xtra6y 31.08.2006 13:38

hovereffekt in IE nicht sichtbar
 
Hallo liebe Wissenden,
bin neu in der Liste und bastle seit Tagen an einem eizigen Problem herum. Da ich noch nicht so fit in HP-erstellen bin (komme aus dem Printbereich) bitte ich um eine Hilfestellung zu einem CSS - Java Problem mit dem IE.

Ich habe ein Navigationsleiste die hat Untermenüs, diese sind in Netscape, Firefox und opera zu sehen nur im IE funktioniert es nicht habe schon einiges ausprobiert aber es funktioniert nicht:

Kann jemand so nett sein sich mal diesen Quellcode ansehen und mir einen Tip geben wie ich das für den IE hinkriegen kann?

ielen Dank im Voraus.
Hier der Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>xtrablatt</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"><!--<!--<!--

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}

function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}

function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}

window.onload=hoverIE;
}
</script>
}

div#Rahmen { font-size: xx-small; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 200; font-stretch: narrower; font-size-adjust: 10; line-height: 100%; width: auto; padding: 0.8em; background-color: none; position: relative; height: auto; }
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em; w\idth: auto; height: auto; }
div#Rahmen div { font-size: 100px; clear: left; }
#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.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
left: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: xxsmall;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #1106f7; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell f&uuml;r IE 5.x */
width: 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: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #1106f7; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: #1106f7;
}
#Ebene2 { height: 100px; width: 700px; left: 50px; top: 125px; position: relative; z-index: 20; visibility: visible; }

html, body {
background-color: #858585;
color: #000000;
height: 100%;
margin: 0%;
padding: 0%;
}
#startseite { position: relative; z-index: 30; visibility: visible; }
#bild { position: relative; visibility: visible; }
#bildunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#foto { position: relative; visibility: visible; }
#restaura { position: relative; visibility: visible; }
#ausstell { position: relative; visibility: visible; }
#text { position: relative; visibility: visible; }
#gestalt { position: relative; visibility: visible; }
#gestaltunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#fahnen { position: relative; visibility: visible; }
#plakate { position: relative; visibility: visible; }
#flyer { position: relative; visibility: visible; }
#internet { position: relative; visibility: visible; }
#galeerie { position: relative; visibility: visible; }
#impressum { position: relative; visibility: visible; }
#links { position: relative; visibility: visible; }
#spacer{
position:absolute;
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width:770px;
min-height:575px;
}
#wrapper { position:absolute; width: 800px; height: 620px; top: 50%; left: 50%; margin-left: -400px; margin-top: -300px; padding: 0; background-image:url(hinter_new_04-neu-leer.jpg); visibility: visible; }

--></style>
</head>
<body>

<div id="spacer"></div>
<div id="wrapper">


<div id="Ebene2">
<div id="Rahmen" style="font-size:xx-small;">
<ul id="Navigation">
<li><a href="#Beispiel">Startseite</a></li>
<li><a href="#Beispiel">Bild</a>
<ul>
<li><a href="#Beispiel">Fotografie</a></li>
<li><a href="#Beispiel">Restauration</a></li>
<li><a href="#Beispiel">Ausstellungen</a></li>
</ul>
</li>
<li><a href="#Beispiel">Text</a></li>
<li><a href="#Beispiel">Gestaltung</a>
<ul>
<li><a href="#Beispiel">Fahnen</a></li>
<li><a href="#Beispiel">Plakate</a></li>
<li><a href="#Beispiel">Flyer</a></li>
<li><a href="#Beispiel">Internet</a></li>
</ul>
</li>
<li><a href="#Beispiel">Galerie</a></li>
</li>
<li><a href="#Beispiel">Impressum</a></li>
<li><a href="#Beispiel">Links</a></li>
</ul>
<div></div>
</div>
</div>
</div>

</body>
</html>

RoToRa 31.08.2006 14:35

Der erste Schritt wäre den Quellcode aufzuräumen. Du hast unter anderem mehrere öffnende Kommentare und Script-Elemente innerhalb Style-Elemente.

http://validator.w3.org/

Ansonsten schau Dir mal das hier an: http://www.htmldog.com/articles/suckerfish/dropdowns/

Robin

xtra6y 31.08.2006 18:43

hovereffekt in IE nicht sichtbar
 
Hallo Robin,
danke für deine schnelle Antwort.
Hab nachfolgenden Text erfolgreich validieren lassen.

Aber Zustände krieg ich jetzt dennoch.
Ich krieg das nicht gebacken. Ich hab mir Suckerfish durchgelesen, verglichen und auch den von mir benutzten Javacode durch den von Suckerfish ersetzt. Half nicht. Entweder bin ich nun total unfähig, blind oder ich begreif es nicht.

Kann ich den bitte einen hilfreichen Satz zur Klärung haben. Wo muß ich ansetzen, dass IE das Untemenü bei BILD und Gestaltung aufklappt? Bei allen anderen von mir benutzten Browsern funktioniert es.

DAnk euch trotzdem allen

Hier der validierte Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>xtrablatt</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"/>

<script type="text/javascript">
if(window.navigator.systemLanguage if(parseInt(navigator.appVersion) 4) !window.navigator.language)
{
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}

function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}

function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}

window.onload=hoverIE;
}
</script>
<style type="text/css">

div#Rahmen { font-size: xx-small; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 200; font-stretch: narrower; font-size-adjust: 10; line-height: 100%; width: auto; padding: 0.8em; background-color: none; position: relative; height: auto; }
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em; w\idth: auto; height: auto; }
div#Rahmen div { font-size: 100px; clear: left; }
#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.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
left: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: xxsmall;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #1106f7; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell f&uuml;r IE 5.x */
width: 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: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #1106f7; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: #1106f7;
}
#Ebene2 { height: 100px; width: 700px; left: 50px; top: 125px; position: relative; z-index: 20; visibility: visible; }

html, body {
background-color: #858585;
color: #000000;
height: 100%;
margin: 0%;
padding: 0%;
}
#startseite { position: relative; z-index: 30; visibility: visible; }
#bild { position: relative; visibility: visible; }
#bildunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#foto { position: relative; visibility: visible; }
#restaura { position: relative; visibility: visible; }
#ausstell { position: relative; visibility: visible; }
#text { position: relative; visibility: visible; }
#gestalt { position: relative; visibility: visible; }
#gestaltunter { left: -4.27px; top: 17.07px; position: absolute; visibility: visible; }
#fahnen { position: relative; visibility: visible; }
#plakate { position: relative; visibility: visible; }
#flyer { position: relative; visibility: visible; }
#internet { position: relative; visibility: visible; }
#galeerie { position: relative; visibility: visible; }
#impressum { position: relative; visibility: visible; }
#links { position: relative; visibility: visible; }
#spacer{
position:absolute;
margin:0px;
padding:0px;
width:100%;
height:100%;
min-width:770px;
min-height:575px;
}
#wrapper { position:absolute; width: 800px; height: 620px; top: 50%; left: 50%; margin-left: -400px; margin-top: -300px; padding: 0; background-image:url(hinter_new_04-neu-leer.jpg); visibility: visible; }

--></style>
</head>
<body>

<div id="spacer"></div>
<div id="wrapper">


<div id="Ebene2">
<div id="Rahmen" style="font-size:xx-small;">
<ul id="Navigation">
<li><a href="#Beispiel">Startseite</a></li>
<li><a href="#Beispiel">Bild</a>
<ul>
<li><a href="#Beispiel">Fotografie</a></li>
<li><a href="#Beispiel">Restauration</a></li>
<li><a href="#Beispiel">Ausstellungen</a></li>
</ul>
</li>
<li><a href="#Beispiel">Text</a></li>
<li><a href="#Beispiel">Gestaltung</a>
<ul>
<li><a href="#Beispiel">Fahnen</a></li>
<li><a href="#Beispiel">Plakate</a></li>
<li><a href="#Beispiel">Flyer</a></li>
<li><a href="#Beispiel">Internet</a></li>
</ul>
</li>
<li><a href="#Beispiel">Galerie</a></li>
<li><a href="#Beispiel">Impressum</a></li>
<li><a href="#Beispiel">Links</a></li>
</ul>
<div></div>
</div>
</div>
</div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023