nicht angemeldet
Drop Down funktioniert in FF wunderbar, in IE leider nicht
Hallo Leute.
Wie der Betreff schon sagt, ich hab ein Problem mit meinem CSS File.
Vorweg es geht um die Navi leiste auf w0lfz.at
Dort hab ich ein Dropdown javascript eingebunden welches unter FF wunderbar funktioniert. jedoch der Dropdown effekt im IE nicht auftritt.
Kann mir wer sagen warum ?!
Ich weiß es ist ein alte Frage, jedoch will ich nicht eine Homepage bauen
(ich bin gerade dabei mir selbst HTML CSS usw zu lernen)
Und dann funktionieren Teile im IE nicht.
hier der auszug aus dem HTML
<div id="middle">
<div id="navigator_top">
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="index.php" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="news.php" id="news" class="top_link"><span class="down">News</span></a>
<ul class="sub">
<li><a href="news.php">Aktuell</a></li>
<li><a href="newsarchive.php">Archiv</a></li>
<li><a href="sendnews.php">Einsenden</a></li>
</ul>
</li>
<li class="top"><a href="forum.php" class="top_link"><span>Forum</span></a></li>
<li class="top"><a href="user.php" class="top_link"><span>Profil</span></a></li>
{if LOGGED_ISTEAM}
<li class="top"><a href="admin/" class="top_link"><span>Admin</span></a></li>
{/if}
</ul>
</div> </div>
Und hier der betreffende CSS auszug.
/*--------------------------- Dropdown Navi ---------------------------*/
.preload1 {background: url(design/images/three_1.gif);}
.preload2 {background: url(design/images/three_1a.gif);}
#nav {
padding:0;
margin:0;
list-style:none;
height:35px;
background:#fff url(/design/images/three_0.gif) repeat-x;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {
display:block;
float:left;
height:35px;
}
#nav li a.top_link {
display:block;
float:left;
height:35px;
line-height:33px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(design/images/three_0.gif);
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
background: url(three_0.gif) right top no-repeat;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
background: url(three_0a.gif) no-repeat right top;
}
#nav li:hover a.top_link {
color:#fff;
background: url(/design/images/three_1.gif) no-repeat;
}
#nav li:hover a.top_link span {
background:url(/design/images/three_1.gif) no-repeat right top;
}
#nav li:hover a.top_link span.down {
background:url(/design/images/three_1a.gif) no-repeat right top;
}
/* Default list styling */
#nav li:hover {
position:relative;
z-index:200;
}
#nav li:hover ul.sub {
left:1px;
top:38px;
background: #bbd37e;
padding:3px;
border:1px solid #5c731e;
white-space:nowrap;
width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a {
display:block;
font-size:11px;
height:18px;
width:88px;
line-height:18px;
text-indent:5px;
color:#000;
text-decoration:none;
border:1px solid #bbd37e;
}
#nav li ul.sub li a.fly {
background:#bbd37e url(/design/images/arrow.gif) 80px 6px no-repeat;
}
#nav li:hover ul.sub li a:hover {
background:#6a812c;
color:#fff;
border-color:#fff;
}
#nav li:hover ul.sub li a.fly:hover {
background:#6a812c url(/design/images/arrow_over.gif) 80px 6px no-repeat;
color:#fff;
}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul {
left:90px;
top:-4px;
background: #bbd37e;
padding:3px;
border:1px solid #5c731e;
white-space:nowrap;
width:90px;
z-index:400;
height:auto;
}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly {
background:#6a812c url(/design/images/arrow_over.gif) 80px 6px no-repeat;
color:#fff;
border-color:#fff;
}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly {
background:#bbd37e url(/design/images/arrow.gif) 80px 6px no-repeat;
color:#000;
border-color:#bbd37e;
}
lg
Franky
-
Dort hab ich ein Dropdown javascript eingebunden welches unter FF wunderbar funktioniert. jedoch der Dropdown effekt im IE nicht auftritt.
Kann mir wer sagen warum ?!
Weil der Internet Explorer (die älteren Modelle) mit der :hover-Pseudoklasse nur auf a-Elementen etwa anfangen kann.
Dein JavaScript ist schön und gut - aber soweit ich das beurteilen kann "tut es nichts" - im Firefox gehts, weil die CSS-Lösung funktioniert.
-
Dort hab ich ein Dropdown javascript eingebunden welches unter FF wunderbar funktioniert. jedoch der Dropdown effekt im IE nicht auftritt.
Kann mir wer sagen warum ?!
Weil der Internet Explorer (die älteren Modelle) mit der :hover-Pseudoklasse nur auf a-Elementen etwa anfangen kann.Dein JavaScript ist schön und gut - aber soweit ich das beurteilen kann "tut es nichts" - im Firefox gehts, weil die CSS-Lösung funktioniert.
hmm, nun bin ich verwirrt, aber du hast recht ...
das script sieht so aus
stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) { cssRule = document.styleSheets[i].rules[x]; if (cssRule.selectorText.indexOf("LI:hover") != -1) { newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); } } var getElm = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<getElm.length; i++) { getElm[i].onmouseover=function() { this.className+=" iehover"; } getElm[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", stuHover);
-
-
hmmm ich komm nicht drauf, hab gerade noch alle überprüft und versteh nicht wieso es nicht klappt, entweder übersehe ich den fehler gekonnt oder ich weiß auch nicht :(