zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hovereffekt in IE nicht sichtbar

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2006, 12:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2006
Beiträge: 2
xtra6y befindet sich auf einem aufstrebenden Ast
Standard 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-sizex-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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2006, 13:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2006, 17:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2006
Beiträge: 2
xtra6y befindet sich auf einem aufstrebenden Ast
Standard 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-sizex-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>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Formularfeld-Eigenschaft: Zweites wird erst sichtbar, wenn erstes voll...= CSS?? Forgetta CSS 2 27.02.2011 18:49
Probleme mit CSS-Drop-Down Menü, nur teilweise sichtbar lili CSS 0 29.04.2008 11:59
box nicht sichtbar steffi911 CSS 1 02.07.2007 12:11
Verschachtelte transparente divs mit inhalt, BG-image dennoch nicht sichtbar ? bastien CSS 12 23.05.2007 13:27
Über ein Bild hovern, dann wird ein pulldownmenü sichtbar ?? bastien CSS 7 21.03.2007 14:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:06 Uhr.