Coding Prob bei "span a:hover"

[gandelfdg]

/* Wurde schon im Traum Lab gepostet, deshalb hier nur der Auszug aus meinem Code Problem:

Es gibt auf der Seite nur ein kleines Problem, dass die Navigation im Firefox wegklappt, wenn ich mit der Maus über einen Link fahre unter dem in einer sehr viel niedrigeren Ebene eine Überschrift ist. Beschreiben des Problems ist relativ schwer, guckt es euch einfach an. Ich gehe mal davon aus, dass es ein Bug ist, weil Opera da keine Probleme macht und es merkwürdigerweise das Verhalten in Firefox gibt, dass, wenn ich das Fenster verkleinere, es durchaus vorkommen kann, dass das Menü dann nicht mehr wegklappt!? Allerdings auch nicht immer. Vielleicht weiß ja jemand von euch ob es sich tatsächlich um einen Bug handelt.
Hier mal die die zwei Ebenen:
erste Ebene z-index: 10 mit einer H1 (oder H2 etc, egal)
zweite Ebene z-index: 500 mit span a (display:hidden), dann span: hover a (display: block), bei span a:hover auf einmal wieder display: hidden -sobald ich über eine Überschrift fahre.
Dabei ist es egal ob ich display:block nun bei span a:hover angebe oder nicht und es funktioniert ja auf 90% der Seiten ohne Probleme, auch wenn andere Ebenen darunter angeordnet sind solange sie keine Überschrift enthalten. Mein Firefox ist übrigens 0.8 und Opera 7.23. So stark einschränkend ist das Problem auch erstmal nicht, weil es noch eine andere Version der Homepage gibt für IE etc, weil der IE mit XHTML 1.1 und span: hover nun gar nicht anfangen kann.

Kommentare und Kritik erfreuen den Autor aufs Äußerste.

[Terry]

Deinen ganzen Quelltext auseinanderzusortieren ist mir echt zu mühsam...

Aber eine dumme Fragen hab ich: wieso z-index 500? Was sollen solche astronomischen Zahlen?

Ein anderes CSS DropdownMenü hätte ich - habs mir letztens aus einem Quelltext gezogen..... und bei dem tritt der Firefox-Bug nicht auf-grad nochmal auf der Seite gecheckt. Allerdings klemmt Opera gelegentlich mit dem Hovern - wenn man aus der anderen Richtung nochmal drüberfährt, gehts dann wieder plötzlich. Mit etwas Javascript funktionierts sogar im IE - dort allerdings zwingend mit Javascript.

Hier der CSS-Teil:

<style type="text/css">
<!--


ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
    
    }

ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
	display:none;
	position:absolute;

	}

ul.dropdown li
{
    float:left;
    padding:2px; /* helps Opera with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
    background-color:#c0c0c0;
    border:1px solid black;
}


ul.dropdown ul * a
{
	width:13em;
}



ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}




ul.dropdown a.has_submenu
{
    background:url(bild.gif) no-repeat right;
}

ul.dropdown
{
    font:10px verdana;
    
}

ul.dropdown ul
{
    font:10px verdana;
    background-color:#f0f0f0;
    border:1px outset #888;
}


ul.dropdown a
{
    color:#000;
    padding:4px;
    text-decoration:none;
}

ul.dropdown a:hover
{
    background-color:#ddd;
    color:#888;
}

Hier der HTML-Teil als Liste (hier mit zwei Unterebenen):

<ul id="mainmenu" class="dropdown">
    <li><a href="#">Link1</a></li>

    <li>
        <a href="#">Link2</a>
        <ul>
            <li><a href="#">Link2a</a></li>
            <li><a href="#">Link2b</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Link3</a>
        <ul>
            <li><a href="#">link3a</a></li>
            <li><a href="#">link3b</a></li>
            <li>
                <a href="#" class="has_submenu">link3c</a>
                <ul>
                    <li><a href="#">untermenu1</a></li>
                    <li><a href="#">untermenü2</a></li>
                    <li><a href="#">untermenü3</a></li>
                    
                </ul>   
            </li> 
         </ul>
    </li>

    <li>
        <a href="#">Link4</a>
        <ul>
            <li><a href="#">link4a</a></li>
            <li><a href="#">link4b</a></li>

        </ul>
    </li>

    <li>
        <a href="#">Link5</a>
        <ul>
            <li><a href="#">link5a</a></li>
            <li>
                <a href="#" class="has_submenu">link5b</a>
                <ul>
                    <li><a href="#">untermenü1</a></li>
                    <li><a href="#">untermenü2</a></li>
                    
                </ul>
            </li>
            
        </ul>
    </li>

</ul>

Und hier das Javascript für den IE:

<script type="text/javascript">
<!--
function enable_menues_for_ie()
{
	if (document.all)
	{
        uls = document.getElementsByTagName('UL');

        for(i = 0; i < uls.length; i++)
        {
            if (uls[i].className == 'dropdown')
            {
                var lis = uls[i].getElementsByTagName('li');

                for (j = 0; j < lis.length; j++)
                {
                    if(lis[j].lastChild.tagName == 'UL')
                    {
                        lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
                        lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }
                    }
                }
            }
        }
    }
}
//-->
</script>

In den body muss dann noch <body onload="enable_menues_for_ie();">

Dann geht´s in allen Browsern - wär ja vielleicht ne Alternative.....

[gandelfdg]

Hab auch versucht es mit ul zu lösen, allerdings gab es dann Bugs wenn ich die Sachen mit "position: absolute" angeordnet hab, weshalb ich das über span a gemacht habe.
Upps den quelltext dazu muss ich noch mal richtig kommentieren, die Version im Inet ist auch so unübersichtlich, weil so die Größe auf 50% geschrumpft ist. aber hier mal ein Auszug:

/* Wie die Navleiste aussehen soll */  

div.navfile {
background-color: #FFCC33;
border: 2px outset;
height: 28px;
left: 0px;
position: absolute;
top: 0px;   	
width: 99%;   	
z-index: 100; 
}  

/* Die einzelnen Menüpunkte */  

span.fileansicht {  	
background-color: #FFCC33;  	
border-bottom: none;  	
border-left: solid 2px #FFCC33;  	
border-right: solid 2px #FFCC33;  	
border-top: solid 2px #FFCC33;  	
color: #000000;  	
float: left;  	
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;  	
left: 0px;  	
padding: 4px;  	
text-decoration: none;  	
top: 0px;  	
width: 59px;  
}  

span.filefavoriten {  	
background-color: #FFCC33;  	
border-bottom: none;  	
border-left: solid 2px #FFCC33;  	
border-right: solid 2px #FFCC33;  	
border-top: solid 2px #FFCC33;  	
color: #000000;  	
float: left;  	
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;  	
left: 0px;  	
padding: 4px;  	
text-decoration: none;  	
top: 0px;  	
width: 76px;  
}  

span.filefile {  	
background-color: #FFCC33;  	
border-bottom: none;  	
border-left: solid 2px #FFCC33;  	
border-right: solid 2px #FFCC33;  	
border-top: solid 2px #FFCC33;  	
color: #000000;  	
float: left;  	
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;  	
left: 0px;  	
margin-left: 8px;  
padding: 4px;  	
text-decoration: none;  	
top: 0px;  	
width: 28px;  
}  

span.filehelp {  	
background-color: #FFCC33;  	
border-bottom: none;  	
border-left: solid 2px #FFCC33;  	
border-right: solid 2px #FFCC33;  	
border-top: solid 2px #FFCC33;  	
color: #000000;  	
float: left;  	
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;  	
left: 0px;  	
padding: 4px;  	
text-decoration: none;  	
top: 0px;  	
width: 36px;  
}  

span.filewindow {  	
background-color: #FFCC33;  	
border-bottom: none;  	
border-left: solid 2px #FFCC33;  	
border-right: solid 2px #FFCC33;  	
border-top: solid 2px #FFCC33;  	
color: #000000;  	
float: left;  	
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;  	
left: 0px;  	
padding: 4px;  	
text-decoration: none;  	
top: 0px;  	
width: 63px;  
} 

 /* Beim Drüberfahren soll die Box erscheinen */  

span.fileansicht:hover, span.filefavoriten:hover, span.filehelp:hover, span.filefile:hover, span.filewindow:hover {
background-color: #FFFF99;  	
border-bottom: none;  	
border-left: solid 2px #000000;  	
border-right: solid 2px #000000;  	
border-top: solid 2px #000000;  	
display: block;  
}

HTML Code dazu:

<div class="navfile">
  	<span class="filefile">File
  		<span> 
                     <a>blah</a>
                 </span>  	
        </span>
        ...
</div>

Interessanterweise gibt es gar kein Attribut "display:hidden"... oder ich hab die CSS Datei noch nicht ausreichend ausgemistet. Hab leider die NAvigation geschrieben und nicht kommentiert und erst im Verlauf der Arbeit an der Seite ist mir eingefallen wie wichtig es wäre, weshalb der Rest auch kommentiert ist nur die NaviEinheit leider nicht, muss das dringend mal nachholen. Wahrscheinlich liegt darin auch das Problem, dass Hidden einfach nicht definiert ist und so werde ich wohl in den Semesterfereien die NaviEinheit nochmal komplett neuschreiben. Aber vielleicht könnt ihr mir ja jetzt schonmal weiterhelfen diesbezüglich. Nebenbei habe ich den z-index so hoch gesetz, damit, egal was ich auch mache und ich mache manchmal schon ziemlichen viel Müll , dei Navi immer ganz oben ist.

Dein Tipp für IE ist schon geil, werd ich mir mal genauer angucken und eventuell umstellen, weil die IE Version ja auch schon mit JS läuft, is das kein Problem und wenn die User unzufrieden sind, sollen sie halt auf Nicht-IE wechseln. Sobald ich das mache und noch alle anderen Unpässlichkeiten verändere -also in den Semesterferien- und es so klappt, werd ich dich natürlich sehr lobend erwähnen.