✔ Darstellungsprobleme im IE 6 (weisse Kreise)

Status
Nicht offen für weitere Antworten.
Ich hatte dich aber auch darauf hingewiesen, dass die für das Listenelement gewählte ID in den Selektoren des Stylesheets genannt werden muss, und du dir zum Vergleich den Quellcode (incl. den des Stylesheets) des verlinkten Beispiels genauer anschauen sollst.

Im Original besitzt das Element die ID #nav, und die Selektoren im Stylesheet lauten bzw. beginnen mit:

Code: 
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
 
Code: 
#navi1, #navi1 ul { margin:0; padding:0; font-size:1.0em; line-height:2.8em; height:2.8em; list-style:none;}
#navi1 li { display: block; position: relative; float:left; margin:0; padding:0; font-size:1.0em; line-height:2.7em; list-style-type:none; border-left:0px #000 solid; border-right:2px #000 solid; height:2.7em; width: 150px;}
#navi1 li#first { border-right:0px #000 solid; border-left:none; padding:0.5em 0em 0.5em 0em; height:2.8em;}



#navi1 li#last {border-left:0px #000 solid; border-right:none; padding:0.5em 0em 0.5em 0em; height:2.8em; overflow:hidden;}
#navi1 li a:link, #navi1 li a:visited {display: block; width:auto; font-size:1em; text-align: center; font-weight:normal; background:transparent; text-decoration:none; color:#fff; margin:0; padding:0.2em 0.8em 0.2em 0.8em;}
#navi1 li a:hover {display: block; height: 2.4em; color:#fff; text-decoration:none; background: url(../../menu/button_leer_hover.png) repeat-x center right; }
#navi1 li#current {border-left:0px #000 solid; border-right:2px #000 solid; background:transparent url(../../menu/button_leer_hover.png) repeat-x center ; line-heigt:2.8em; width: 150px;  text-align: center; padding:0px 0em 0em 0em;}
#navi1 li#current a, #navi1 li#current a:hover { color:#fff; background:transparent; text-decoration:none; line-heigt: 2.9em;}



#navi1 li ul.navi2
        { margin:0; padding:0px 0px 0; list-style:none; display:none; width:150px; position: relative; top:0px; left:0px; border-right: 0px; border: 0px; }
#navi1 li:hover ul.navi2, #navi1 li.sfhover ul.navi2 /* hattest du auch vergessen */
        { display:block; }
#navi1 li ul.navi2 li
        { clear:left; width:150px;  border-right: 0px; -moz-opacity: 0.85; border: 0px;}


#navi1 li ul.navi2 li a:link,
#navi1 li ul.navi2 li a:visited
        { clear:left; padding:0px 0; width:150px; border-right:none; border-bottom:0px solid #333; position:relative; z-index: 100; }

#navi1 li ul.navi2 li:hover a,
#navi1 li ul.navi2 li a:active,
#navi1 li ul.navi2 li a:hover
        { clear:left; background:#1e1e1e; padding:0px 0; width:auto; border-right:none; border-bottom:0px solid #333; position:relative; z-index: 100;}


#navi1 li ul.navi2 li ul.navigation-3
        { display:none; margin:0; padding:0; list-style:none; position:absolute; left:148px; top:0px; padding:0px 1px 0 1px; border:none; background:#ffffff; z-index:900; }
#navi1 li ul.navi2 li:hover ul.navigation-3
        { display:block; }
#navi1 li ul.navi2 li ul.navigation-3 li a:link,
#nav_main ul li ul.navi2 li ul.navigation-3 li a:visited
        { background:#b9121b; }
#navi1 li ul.navi2 li ul.navigation-3 li:hover a,
#navi1 li ul.navi2 li ul.navigation-3 li a:hover,
#navi1 li ul.navi2 li ul.navigation-3 li a:active
        { background:#ec454e; }


#navi1 li ul.navi2 li a span
        {background-color: #1e1e1e; position:absolute; top:0px; left:0px; font-size:12px; color:#ffffff;  width: 100%;}
#navi1 li ul.navi2 li:hover a span,
#navi1 li ul.navi2 li a:hover span
        { position:absolute; top:0px;  left:0px; font-size:12px; color:#ffff00; background-color: #1e1e1e; width: 100%; }


#navi1 li#current ul.navi2 li a, #navi1 li#current ul.navi2 li a, #navi1 li#current ul.navi2 li a span, #navi1 li#current ul.navi2 li a span {
background-color: #1e1e1e; position: absolute; top: 0px; left: 0px; color:#ffffff; width: 100%;  padding: 0px 0px;  line-height: auto; }

#navi1 li#current ul.navi2 li a:hover,  #navi1 li#current ul.navi2 li a:hover span {
background-color: #1e1e1e; position: absolute; top: 0px; left: 0px; color:#ffff00; width: 100%;  padding-bottom:4px;}
müsste das Stylesheet lauten.

Seltsamerweise verhindert aber irgendwas des YAML-Frameworks die Funktionalität im IE6, wie dieses funktionstüchtige Beispiel demonstriert:

Code: 
<!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">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
body {
background: #000;
}

#nav_main {

        position: relative;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        margin-bottom:0px;
        z-index: 1000;
        }

.tx-macinasearchbox-pi1 {display:none;}

#nav_main {width:100%; height: 2.8em; background:#000 url(../../menu/button_leer.png) repeat-x center right; border-top:0px #000 solid; border-bottom:0px #000 solid; }
#navi1, #navi1 ul { margin:0; padding:0; font-size:1.0em; line-height:2.8em; height:2.8em; list-style:none;}
#navi1 li { display: block; position: relative; float:left; margin:0; padding:0; font-size:1.0em; line-height:2.7em; list-style-type:none; border-left:0px #000 solid; border-right:2px #000 solid; height:2.7em; width: 150px;}
#navi1 li#first { border-right:0px #000 solid; border-left:none; padding:0.5em 0em 0.5em 0em; height:2.8em;}



#navi1 li#last {border-left:0px #000 solid; border-right:none; padding:0.5em 0em 0.5em 0em; height:2.8em; overflow:hidden;}
#navi1 li a:link, #navi1 li a:visited {display: block; width:auto; font-size:1em; text-align: center; font-weight:normal; background:transparent; text-decoration:none; color:#fff; margin:0; padding:0.2em 0.8em 0.2em 0.8em;}
#navi1 li a:hover {display: block; height: 2.4em; color:#fff; text-decoration:none; background: url(../../menu/button_leer_hover.png) repeat-x center right; }
#navi1 li#current {border-left:0px #000 solid; border-right:2px #000 solid; background:transparent url(../../menu/button_leer_hover.png) repeat-x center ; line-heigt:2.8em; width: 150px;  text-align: center; padding:0px 0em 0em 0em;}
#navi1 li#current a, #navi1 li#current a:hover { color:#fff; background:transparent; text-decoration:none; line-heigt: 2.9em;}



#navi1 li ul.navi2
        { margin:0; padding:0px 0px 0; list-style:none; display:none; width:150px; position: relative; top:0px; left:0px; border-right: 0px; border: 0px; }
#navi1 li:hover ul.navi2, #navi1 li.sfhover ul.navi2
        { display:block; }
#navi1 li ul.navi2 li
        { clear:left; width:150px;  border-right: 0px; -moz-opacity: 0.85; border: 0px;}


#navi1 li ul.navi2 li a:link,
#navi1 li ul.navi2 li a:visited
        { clear:left; padding:0px 0; width:150px; border-right:none; border-bottom:0px solid #333; position:relative; z-index: 100; }

#navi1 li ul.navi2 li:hover a,
#navi1 li ul.navi2 li a:active,
#navi1 li ul.navi2 li a:hover
        { clear:left; background:#1e1e1e; padding:0px 0; width:auto; border-right:none; border-bottom:0px solid #333; position:relative; z-index: 100;}


#navi1 li ul.navi2 li ul.navigation-3
        { display:none; margin:0; padding:0; list-style:none; position:absolute; left:148px; top:0px; padding:0px 1px 0 1px; border:none; background:#ffffff; z-index:900; }
#navi1 li ul.navi2 li:hover ul.navigation-3
        { display:block; }
#navi1 li ul.navi2 li ul.navigation-3 li a:link,
#nav_main ul li ul.navi2 li ul.navigation-3 li a:visited
        { background:#b9121b; }
#navi1 li ul.navi2 li ul.navigation-3 li:hover a,
#navi1 li ul.navi2 li ul.navigation-3 li a:hover,
#navi1 li ul.navi2 li ul.navigation-3 li a:active
        { background:#ec454e; }


#navi1 li ul.navi2 li a span
        {background-color: #1e1e1e; position:absolute; top:0px; left:0px; font-size:12px; color:#ffffff;  width: 100%;}
#navi1 li ul.navi2 li:hover a span,
#navi1 li ul.navi2 li a:hover span
        { position:absolute; top:0px;  left:0px; font-size:12px; color:#ffff00; background-color: #1e1e1e; width: 100%; }


#navi1 li#current ul.navi2 li a, #navi1 li#current ul.navi2 li a, #navi1 li#current ul.navi2 li a span, #navi1 li#current ul.navi2 li a span {
background-color: #1e1e1e; position: absolute; top: 0px; left: 0px; color:#ffffff; width: 100%;  padding: 0px 0px;  line-height: auto; }

#navi1 li#current ul.navi2 li a:hover,  #navi1 li#current ul.navi2 li a:hover span {
background-color: #1e1e1e; position: absolute; top: 0px; left: 0px; color:#ffff00; width: 100%;  padding-bottom:4px;}


/*****************************
**********end*MAINMENU********
****************
</style>
<script type="text/javascript">
sfHover = function() {
        var sfEls = document.getElementById("navi1").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

</head>
<body>

<div id="nav_main"><ul id="navi1"><li id="current"><a href="gewa.html" title="GEWA GmbH" onfocus="blurLink(this);">GEWA</a><ul class="navi2"><li><a href="phil.html" onfocus="blurLink(this);">Philosophie</a></li><li><a href="sub.html" onfocus="blurLink(this);"><span>Tochtergesellschaften</span></a></li><li><a href="headquarter.html" onfocus="blurLink(this);"><span>Stammsitz</span></a></li><li><a href="history.html" onfocus="blurLink(this);"><span>Chronik</span></a></li><li><a href="quality.html" onfocus="blurLink(this);"><span>Qualitätssicherung</span></a></li><li><a href="info.html" onfocus="blurLink(this);"><span>GEWA Info</span></a></li><li><a href="carrier.html" onfocus="blurLink(this);"><span>Karriere</span></a></li></ul></li><li><a href="brands.html" onfocus="blurLink(this);">MARKEN/PRODUKTE</a><ul class="navi2"><li><a href="guitars.html" onfocus="blurLink(this);"><span>Gitarren</span></a></li><li><a href="wind.html" onfocus="blurLink(this);"><span>Blasinstrumente</span></a></li><li><a href="drums.html" onfocus="blurLink(this);"><span>Drums/Percussion</span></a></li><li><a href="string.html" onfocus="blurLink(this);"><span>Streichinstrumente</span></a></li><li><a href="accessories.html" onfocus="blurLink(this);"><span>Allgemeines Zubehör</span></a></li><li><a href="cases.html" onfocus="blurLink(this);"><span>Taschen und Koffer</span></a></li><li><a href="strings.html" onfocus="blurLink(this);"><span>Saiten</span></a></li></ul></li><li><a href="downloads.html" onfocus="blurLink(this);">DOWNLOADS</a><ul class="navi2"><li><a href="catalogs.html" onfocus="blurLink(this);"><span>Kataloge</span></a></li><li><a href="screensaver.html" onfocus="blurLink(this);"><span>Bildschirmschoner</span></a></li></ul></li><li><a href="dealer.html" onfocus="blurLink(this);">HÄNDLER</a><ul class="navi2"><li><a href="dealersearch.html" onfocus="blurLink(this);"><span>Händlersuche</span></a></li></ul></li><li><a href="news.html" onfocus="blurLink(this);">NEWS/AKTIONEN</a><ul class="navi2"><li><a href="links.html" onfocus="blurLink(this);"><span>Links zu Aktionen</span></a></li><li><a href="newsletter.html" onfocus="blurLink(this);"><span>Newsletter</span></a></li><li><a href="artists.html" onfocus="blurLink(this);"><span>Artists / Events</span></a></li><li><a href="support.html" onfocus="blurLink(this);"><span>Support / Sponsoring</span></a></li><li><a href="movie.html" onfocus="blurLink(this);"><span>Movie</span></a></li></ul></li><li><a href="webshop.html" onfocus="blurLink(this);">WEBSHOP B2B</a></li></ul></div>

</body>
</html>
 
Funktioniert nun insofern, dass die 2. Ebene aufpoppt aber auch den ganzen Content soweit nach unten schiebt wie die 2. Ebene hoch ist.
 
Nimm mal die folgende Regel für den IE6 im Stylesheet auf:

Code: 
* html #navi1 { position:absolute; left:0;}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück