Powl: PNG, Transparenz, AlphaImageLoader "$%&/" IE

Beitrag lesen

SELF-Forum

PNG, Transparenz, AlphaImageLoader "$%&/" IE

Powl
– Informationen zu den Bewertungsregeln

Hallo,

folgendes Scenario:

body mit Hintergrundbild, absolute positioniert, overflow hidden.
div #content absolute positioniert, overflow auto.
div #menu absolute positioniert

  
<div id="menu">  
    <ul id="navlist">  
    <li><a class="home" href="index.php" title="Home"><span>H</span>ome</a></li>  
...  
    <li><a class="Impressum" title="Impressum"><span>I</span>mpressum</a></li>  
    </ul>  
</div><!--ENDE menu -->

(Ich weiß, das div #menu ist nicht unbedingt nötig, aber ich brauche u. U. noch es für einen anderen Effekt.)

Soweit gut. white.png (kleines Quadrat, 70% Deckkraft, weiß) als Hintergrundbild eingefügt:

  
ul#navlist {  
  ...  
  bottom:10%;  
  border-top:1px solid rgb(150,150,150);  
  border-right:5px solid black;  
  border-left:1px solid rgb(150,150,150);  
  border-bottom:5px solid black;  
  background:url(../grafik/trans/white.png) top left repeat;  
}

In _Browsern_ sieht das so schon gut aus. Prima. Nur Im IE keine Transparenz. Aber, da gibt es ja filter für. Also folgendes hinterher:
Backgroundimage für #navlist entfernt und mit:

  
#menu > #navlist {  
  background:url(../grafik/trans/white.png) top left repeat;  
}  
* html #navlist {  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grafik/trans/white.png',sizingMethod='scale');  
}

workarounded. (Sagt man das jetzt so? ;) )

Oh Wunder, das sieht ja fast aus wie in _Browsern_. Klasse!
Dann aber das böse Erwachen. Es lassen sich keine Links mehr erreichen. Der Effekt ist so, als ob das "Hintergrundbild" _über_ dem Element liegt, und nicht dahinter. Auch kleine Erläuterungen (acronym tag mit title attribut) lassen sich nicht anmausen.

Daraufhin habe ich versucht, die li bzw. a Elemente mittels z-index wieder nach "vorne" zu holen, aber ohne Erfolg.

Kann mir jemand einen Tipp geben, wie man diesen Filter nutzen kann, ohne die Inhalte zu überdecken? Ich habe mir jetzt mit
filter:alpha(opacity=75);
beholfen, was aber den gravierenden Nachteil hat, daß auch die Schrift transparent wird.

Wäre für einen geeigneten input sehr dankbar.

^da Powl (sich die verbliebenen Haare raufend)

Beitrag melden
–
Informationen zu den Bewertungsregeln