blumentopf: Browserweichen für border-radius Alternative

Beitrag lesen

Hallo,
ich habe einen Inhaltsbereich mit einer abgerundeten weißen Fläche hinterlegt. Die Fläche ist ein weißes <div> mit entsprechend eingestelltem border-radius. Als Alternative für Browser wie IE 8 und älter biete ich eine Grafikdatei an, die mit folgendem Comment im head ausgewählt werden sollen.
Zuvor noch kurz mein Problem: zumindest bei IE8 werden beide Versionen angezeigt, so dass eine eckige Fläche zu sehen ist.

Zunächst die styles und die Comments:

<style type="text/css">  
.WeissDiv {display:block}  
.WeissPNG {display:none}  
</style>  
  
  <!--[if lt IE 9]>  
<style type="text/css">  
.WeissDiv {display:none}  
.WeissPNG {display:block}  
</style>  
  <![endif]-->

WeissDiv ist die class der Div Variante, WeissPNG, die der Grafikversion.

Hier der Code der betreffenden Elemente:

<div id="WeissundRundL" class="Mittelgrund WeissDIV" style="position:absolute; top:100px; left:84px;height:481px;width:68px;border:solid white;background-color:white;border-top-left-radius:70px;border-bottom-left-radius:70px;-moz-border-radius-topleft:70px;-moz-border-radius-bottomleft:70px;z-index:0;"></div>

<div id="WeissundRundR" class="Mittelgrund WeissDIV" style="position:absolute; top:100px; left:823px;height:481px;width:68px;border:solid white;background-color:white;border-top-right-radius:70px;border-bottom-right-radius:70px;-moz-border-radius-topright:70px;-moz-border-radius-bottomright:70px;z-index:0;"></div>

<div id="WeissundRundM" class="Mittelgrund WeissDIV" style="position:absolute; top:100px; left:158px;height:449px;width:659px;border:solid white;background-color:white;z-index:0;"></div>

<div  class="Mittelgrund WeissPNG" style="position:absolute; top:90px; left:80px;border:none;"><IMG SRC = "bilder/weiss.png" ALT = "" style="width:820px;border:none;" ></div>

Sieht jemand den Fehler?

Besten Dank und Grüße