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