✔ AlphaImageLoader?

Status
Nicht offen für weitere Antworten.
poli-dori

poli-dori

Erfahrenes Mitglied
Hi Leute,

bin fleißig am Website-Basteln. Ich habe als background-image für ein DIV eine PNG-Datei mit Alphatransparenz. Wir wissen, im FF funktioniert die Darstellung einwandtfrei und im IE nicht. Dafür möchte ich AlphaImageLoader verwenden. Jedoch zeigt mir der IE gar nix an.
Ich poste Euch mein CSS, vielleicht seht Ihr den Fehler, denn ich kann ihn nicht finden
Code: 
html, body {
    height: 100%;
    margin: 0px;
    background-repeat: repeat;
    background-image: url(../images/bgattern.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
}

#mainContainer {
    position: absolute;
    width: 714px;
    height: 100%;
    left: 50%;
    margin-left: -357px;
    background-repeat: repeat;
}


/* IE ausschließen, denn IE kennt body > #mainContainer nicht) */
body > #mainContainer {
    background-image: url(../images/contentbg.png);
}

/* IE exklusiv, denn nur IE kann * html #mainContainer) */
* html #mainContainer {
    background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbg.png');
}
Und hier noch das HTML dazu:
Code: 
<body>
    <div id="mainContainer"></div>
</body>
Wie gesagt, im FF funktioniert es.

Könnt Ihr mir bitte helfen?


Danke
 
Die Hintergrundgrafik wird bei mir im IE (6.0) schon angezeigt, nur wird sie in dem Element nicht wiederholt.

Erweiter daher mal den Filter mit dem Parameter sizingMethod:

Code: 
/* IE exklusiv, denn nur IE kann * html #mainContainer) */
* html #mainContainer {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='../images/contentbg.png');
}


[editpost]

Bei dir stimmt im Selektor * html #maincontainer die Grafik-URI nicht, weshalb der IE die Hintergrundgrafik auch nicht anzeigt ;)
 
Hi,

jetzt schaut das CSS so aus:
Code: 
html, body {
 height: 100%;
 margin: 0px;
 background-repeat: repeat;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 line-height: 150%;
 color: #FFFFFF;
 background-image: url(../images/bgpattern.gif);
}
#mainContainer {
 position: absolute;
 width: 714px;
 height: 100%;
 left: 50%;
 margin-left: -357px;
}
/* IE ausschließen, denn IE kennt 'body>#mainContainer' nicht) */
body>#mainContainer {
 background-image: url(../images/contentbg.png);
 background-repeat: repeat;
}
/* IE exklusiv, denn nur IE kann * html #mainContainer) */
*html#mainContainer {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='/images/contentbg.png');
}

Aber immer noch keine Änderung!

Verdammt!
 
Scheinbar hast du nicht bemerkt, daß ich meinen letzten Beitrag editiert hatte ;)

Probier's mal hiermit:

Code: 
html, body {
 height: 100%;
 margin: 0px;
 background-repeat: repeat;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 line-height: 150%;
 color: #FFFFFF;
 background-image: url(../images/bgpattern.gif);
}
#mainContainer {
 position: absolute;
 width: 714px;
 height: 100%;
 left: 50%;
 margin-left: -357px;
}
/* IE ausschließen, denn IE kennt 'body > #mainContainer' nicht) */
body > #mainContainer {
 background-image: url(../images/contentbg.png);
 background-repeat: repeat;
}
/* IE exklusiv, denn nur IE kann * html #mainContainer) */
* html #mainContainer {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='../images/contentbg.png');
}
Die Grafik-URI lautet nämlich ../images/contentbg.png

Zudem müssen in den Selektoren die Leerzeichen notiert werden: body > #mainContainer und * html #maincontainer.
 
Du hast ja auch nicht die empfohlenen Änderungen im CSS-Code vorgenommen. Von daher kann es auch nicht im IE funktionieren.
 
Okay, ich hab das Ganze jetzt nochmal komplett lokal getestet, und der IE erwartet nur einen Punkt vor dem Verzeichnis "images" - also:

Code: 
* html #mainContainer {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='./images/contentbg.png');
}
 
Vor ein paar Minuten hat es auf deiner Seite noch einwandfrei funktioniert, aber nun fehlen im "Star-HTML-Hack"-Selektor wieder die Leerzeichen, weshalb der IE (6.0) die Regel "ignoriert" ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück