PNG: Transparenz zum Hintergrundbild des Elternelement im IE

[Migu]

Guten Abend,

wieder einmal benoetige ich eure geschaetzte Expertenhilfe. Wie unter http://swiwi.co.nz/test/sites/benefits_floorwater.html zu sehen ist, versuche ich Folgendes:

Die Box unter der Navigationsleiste hat ein Hintergrundbild. Dieses Hintergrundbild ist einiges groesser als der Bildausschnitt, den man sehen kann. So wird beim Vergroessern des Textes auch das Hintergrundbild ohne Skalierung mitwachsen.

Der nicht sichtbare Teil vom Bild wird von den p- und h2-Elementen verdeckt, welche einen linken relativen Aussenabstand zum Elternelement und einen kleinen relativen linken Innenabstand haben. Diese beiden Child-Elemente haben auch ein Hintergrundbild. Das ist eine weisse Box mit einem kleinen Verlauf von transparent nach weiss am linken Rand.

In Safari funktioniert das wunderbar aber bekanntlich unterstuetzt der IE fuer Win keine Transparenz fuer PNGs. Ich hab dann beim p-Element versucht mittels Alpha Image Loader die Transparenz zu erzwingen. Wie es scheint, habe ich nicht ganz verstanden um was es sich bei diesem Filter handelt; das ganze Hintergrundbild wird dann durchsichtig oder nicht dargestellt.

Koennt ihr mir weiter helfen?

Viele Gruesse aus Neuseeland, Michael

div.content div  {
background-image: url("../images/test1.jpg");
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: 1.5em;
position: relative;
border: solid 0.2em #e95700
}

div.content * p  {
font-size: 0.8em;
background-image: url("../images/_box_text_background.png");
background-repeat: repeat-y;
background-position: left 0;
margin-top: 0; margin-bottom: 0; margin-left: 8em;
padding: 0 2em 0.8em 4em
}

* html div.content * p
{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
/*Warum nach progid: ein Bindestrich in diesem Beitrag erscheint, kann ich mir nicht erklaeren. Im Stylesheet aus welchem ich den Text kopiert habe ist er nicht enthalten./*
(src="../images/_box_text_background.png", sizingMethod="crop");
} 

div.content * h2  {
color: #e95700;
font-size: 0.8em;
font-weight: bold;
background-image: url("../images/_box_text_background.png");
background-repeat: repeat-y;
background-position: left 0;
text-align: left;
margin-top: 0; margin-bottom: 0; margin-left: 8em;
padding: 0.8em 2em 0.8em 4em
}