IE8 akzeptiert kein a:hover bei Einsatz von filter alpha
0 
Beat
0 0 Beat
0 0 Datum im Postingtext
Der Martin
IE8 akzeptiert kein a:hover bei Einsatz von filter alpha
Montag, 4. Januar 2010
Hallo,
im nachfolgenden (stark vereinfachten) Beispiel wird eine Navigation mit Hauptmenü und Untermenü dargestellt. Das Hauptmenü ist permanent sichtbar, das Untermenü wird bei 'onload' der Seite zeitverzögert mit einem Fading-Effekt eingeblendet.
So weit funktioniert das Script in allen Browsern.
Bei 'a:hover' über einen Listenpunkt soll der jeweilige Link farbig unterlegt werden; dies klappt in Firefox, Opera und IE 6 und 7 - im IE 8 dagegen leider nicht.
Zudem ist die Schrift des per Fading-Effekt eingeblendeten Untermenüs gegenüber dem Hauptmenü 'entstellt'.
Weiß jemand Rat, wie ich den IE8 hier überreden kann, die Listenpunkte des Untermenüs bei 'mouseover' farbig zu unterlegen und die Schrift optisch ansehnlicher zu machen ?
Für alle Tipps vorab herzlichen Dank.
Hier das vollständige Script:
----------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
<!--
*
{
padding:0px;
margin:0px;
}
ul
{
list-style-type:none;
float:left;
margin-right:50px;
}
ul a:hover
{
background-color:red;
}
-->
</style>
<script type="text/javascript">
<!--
var dom = (document.getElementById) ? 1:0;
//
function zeige_ebene(nummer)
{
if (dom)
{
ebene = document.getElementById('menue');
listen = ebene.getElementsByTagName('ul');
z = 5;
m = 0;
for (i = 0; i < listen.length; i++)
{
if (nummer == i)
{
for (n = 0; n < 100; n++)
{
window.setTimeout("setze_eigenschaft("+n+","+nummer+")",(z*m));
m++;
}
}
}
}
}
function setze_eigenschaft(wert,nummer)
{
if (dom)
{
ebene = listen[nummer].style;
ebene.opacity = (wert/100);
if (wert > 1)
ebene.display = "block";
}
}
-->
</script>
<!--[if IE]>
<script type="text/javascript">
function setze_eigenschaft(wert,nummer)
{
if (dom)
{
ebene = listen[nummer].style;
ebene.filter = "alpha(opacity = "+wert+")";
if (wert > 1)
ebene.display = "block";
}
}
</script>
<![endif]-->
</head>
<body onload="window.setTimeout('zeige_ebene(1)',500)">
<ul>
<li><a href="#">Hauptmenü 01</a></li>
<li><a href="#">Hauptmenü 02</a></li>
<li><a href="#">Hauptmenü 03</a></li>
</ul>
<ul style="display:none">
<li><a href="#">Submenü 01</a></li>
<li><a href="#">Submenü 02</a></li>
<li><a href="#">Submenü 03</a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------------
-
Du setzt via JS ein Attribut für den filter.
Das Attribut hat demnach Vorrang vor <style> CSSAbhilfe: Setze mit JS Klassen und definiere Alpha im CSS.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
... tut mir leid, das habe ich leider nicht verstanden ... da muss ich passen.
-
... tut mir leid, das habe ich leider nicht verstanden ... da muss ich passen.
Nachdem du du mit setTimeout filtereigenschaften dynamisch verändern willst, ist mein Ratschlag auch nicht mehr relevant.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
Mist, ich Esel ich, - da hat was Entscheidendes gefehlt im Script; jetzt also nochmal das vollständig! Sorry!
---------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
<!--*
{
padding:0px;
margin:0px;
}ul
{
list-style-type:none;
float:left;
margin-right:50px;
}ul a:hover
{
background-color:red;
}-->
</style><script type="text/javascript">
<!--var dom = (document.getElementById) ? 1:0;
//
function zeige_ebene(nummer)
{
if (dom)
{ebene = document.getElementById('menue');
listen = ebene.getElementsByTagName('ul');z = 5;
m = 0;for (i = 0; i < listen.length; i++)
{if (nummer == i)
{for (n = 0; n < 100; n++)
{
window.setTimeout("setze_eigenschaft("+n+","+nummer+")",(z*m));
m++;
}}
}
}
}function setze_eigenschaft(wert,nummer)
{
if (dom)
{ebene = listen[nummer].style;
ebene.opacity = (wert/100);
if (wert > 1)
ebene.display = "block";}
}-->
</script><!--[if IE]>
<script type="text/javascript">
function setze_eigenschaft(wert,nummer)
{
if (dom)
{ebene = listen[nummer].style;
ebene.filter = "alpha(opacity = "+wert+")";
if (wert > 1)
ebene.display = "block";}
}</script>
<![endif]-->
</head>
<body onload="window.setTimeout('zeige_ebene(1)',500)">
<div id="menue">
<ul>
<li><a href="#">Hauptmenü 01</a></li>
<li><a href="#">Hauptmenü 02</a></li>
<li><a href="#">Hauptmenü 03</a></li></ul>
<ul style="display:none">
<li><a href="#">Submenü 01</a></li>
<li><a href="#">Submenü 02</a></li>
<li><a href="#">Submenü 03</a></li></ul>
</div>
</body>
</html>
---------------------------------------------------------------------------
-
Hallo,
Montag, 4. Januar 2010
nanu - bist du noch von gestern übriggeblieben? :-)
So long,
Martin--
Die letzten Worte des Helden:
Feigling! Traust dich ja doch nicht!
-
... eigentlich bin ich und mein Problem von vorgestern !
Das Problem will ich heute angehen und habe es fix aus meinem "Problemarchiv" übernommen - bin mir aber sicher, dass das geschilderte Problem nicht am falschen Datum liegt. ;-)
-
(...) bin mir aber sicher, dass das geschilderte Problem nicht am falschen Datum liegt. ;-)
Wer weiß, manche Probleme lösen sich mit der Zeit selbst.
Versuch doch mal ein anderes Datum ;DGrüße, Matze
-
-