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

[Powl]

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)

[Cheatah]

Hi,

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.

richtig. Im Gegensatz zur Spezifikation bei Microsoft, nebenbei bemerkt.

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

Auch richtig. Du wirst keinen Erfolg haben - die Elemente innerhalb des "gefilterten" Elements sind kastriert.

Kann mir jemand einen Tipp geben, wie man diesen Filter nutzen kann, ohne die Inhalte zu überdecken?

Den Filter auf ein anderes Element legen, welches sich über den entsprechenden Bereich aufspannt. Krank, ich weiß.

Cheatah

[Powl]

Hallo,

richtig. Im Gegensatz zur Spezifikation bei Microsoft, nebenbei bemerkt.

Ja, habe ich auch gelesen. Gibbet da denn kein Gesetz gegen??? Würde Zeit...

Auch richtig. Du wirst keinen Erfolg haben - die Elemente innerhalb des "gefilterten" Elements sind kastriert.

Immerhin: mit menu>bearbeiten>alles-markieren bekommt man sie immerhin noch markiert. Toll oder?

Den Filter auf ein anderes Element legen, welches sich über den entsprechenden Bereich aufspannt. Krank, ich weiß.

Ich hab's befürchtet - aber meinst Du nicht _unter_ dem entsprechenden Bereich? Wenn es darüber aufspannt, käme man doch wieder nicht an die Elemente heran, oder?

Danke für Deine Antwort. Das ich nun doch keine Haare mehr habe ist ja nicht Deine Schuld ;)

netten Abend
^da Powl

[Cheatah]

Hi,

richtig. Im Gegensatz zur Spezifikation bei Microsoft, nebenbei bemerkt.
Ja, habe ich auch gelesen. Gibbet da denn kein Gesetz gegen??? Würde Zeit...

gegen Microsoft? Wo muss ich unterschreiben? ;-)

Immerhin: mit menu>bearbeiten>alles-markieren bekommt man sie immerhin noch markiert. Toll oder?

Ja, das ist in der Tat sehr großzügig vom Hersteller.

Den Filter auf ein anderes Element legen, welches sich über den entsprechenden Bereich aufspannt. Krank, ich weiß.
Ich hab's befürchtet - aber meinst Du nicht _unter_ dem entsprechenden Bereich? Wenn es darüber aufspannt, käme man doch wieder nicht an die Elemente heran, oder?

IIRC war das egal, aber im Zweifel steht "unter" ja immer noch zur Auswahl.

Danke für Deine Antwort. Das ich nun doch keine Haare mehr habe ist ja nicht Deine Schuld ;)

Nein, obwohl man mir bisweilen stark föhnende Eigenschaften zuschreibt ;-)

Cheatah

[Powl]

Hallo,

Ich hab's befürchtet - aber meinst Du nicht _unter_ dem entsprechenden Bereich? Wenn es darüber aufspannt, käme man doch wieder nicht an die Elemente heran, oder?

IIRC war das egal, aber im Zweifel steht "unter" ja immer noch zur Auswahl.

Möglich, das wäre zwar irgendwie völlig bar jeglicher Logik, aber mich wundert IE-spezifisch eigentlich _nichts_ mehr.

schönen, sonnigen Tag.

^da Powl

[Cheatah]

Hi,

Möglich, das wäre zwar irgendwie völlig bar jeglicher Logik, aber mich wundert IE-spezifisch eigentlich _nichts_ mehr.

dazu fällt mir nur eins ein:

"Logik, Logik, Logik ... Logik ist der Anfang aller Weisheit, Valeris, aber nicht das Ende."
-- Spock

Cheatah ;-)

[Maxx]

Hallo,

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grafik/trans/white.png',sizingMethod='scale');
  Es lassen sich keine Links mehr erreichen.

da du "scale" verwendest ist die Größe deines png relativ egal. Verwende ein png mit der Höhe 1px

Viele Grüße

Jochen