simbim: Alphatransparente DIV's überlagern nicht richtig

Beitrag lesen

SELF-Forum

Alphatransparente DIV's überlagern nicht richtig

simbim
– Informationen zu den Bewertungsregeln

Hallo,

mal wieder geht es um die Besonderheiten des Internet Explorers, die uns allen seit Jahren so erfreuen. Im Prinzip möchte ich einfach nur einen Rahmen um ein DIV ziehen. Hört sich einfach an - ist es eigentlich auch, aber eben nur eigentlich... Denn der Rahmen besteht aus alphatransparenten PNG's und ich möchte das ganze auch für den IE5.5 und IE6 zugänglich (bzw. sichtbar) machen!

Die PNG's werden per CSS als "background" definiert. Die Bilder enthalten einen Farbverlauf von "VollFarbe" nach "VollTransparent". Es werden vier Bilder (je 30x30px) hinterlegt - im Prinzip mit identischem Inhalt, um jeweils 90° gedreht. Durch Anordnung und Zuordnung entsteht so ein Rahmen der Außen eckig ist, nach innen durchsichtig wird und an den inneren Kanten (durch die Alphatransparenz) ineinander übergeht.

Moderne Browser haben damit kein Problem, doch die älteren Versionen des Internet Explorers liefern hier nicht den gewünschten Effekt. Die DIV's überlagern sich und scheinen nicht durch...

Online Version des "Problems"
SOLL Grafik Beispiel im Firefox
SOLL Grafik Beispiel im IE7
IST Grafik Beispiel im IE6
IST Grafik Beispiel im IE5.5

und hier noch der Quellcode :
--------------------------------------------------------------

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>Alpha Border Test</title>  
  <link rel="stylesheet" type="text/css" href="style.css" />  
</head>  
<body>  
  <div id="wrapper">  
    <div id="content">  
      <div id="header">&nbsp;</div>  
        <p>Lorem ipsum etc.</p>  
      <div id="footer">&nbsp;</div>  
    </div>  
  </div>  
</body>  
</html>

--------------------------------------------------------------

mit dem dazugehörigen CSS :

--------------------------------------------------------------

  
#wrapper {  
 background-image: url(img/alpha_e.png);  
 background-repeat: repeat-y;  
 background-position: right;  
}  
  
#content {  
 background-image: url(img/alpha_w.png);  
 background-repeat: repeat-y;  
}  
  
#header {  
  height: 30px;  
 background-image: url(img/alpha_n.png);  
 background-repeat: repeat-x;  
}  
  
#footer {  
  height: 30px;  
 background-image: url(img/alpha_s.png);  
 background-repeat: repeat-x;  
}

--------------------------------------------------------------

Wenn jemand hierzu eine Idee hat würde mich das sehr freuen, auch wenn ich befürchte, das es sich um eine nicht zu behebende Unzulänglichkeit der Rendering Engine des IE handelt und hier mit "workarounds" einfach nichts  zu machen ist...

Beitrag melden
–
Informationen zu den Bewertungsregeln