Browserweichen für border-radius Alternative

[blumentopf]

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

[Matthias Apsel]

Om nah hoo pez nyeetz, blumentopf!

Du könntest schreiben

foo {background-image: url('runde Ecke');  
     background-image: none, none; } /* ungetestet */

und so auf CC verzichten.

die dahinter steckende Idee:

Alle IE verwenden das Hintergrundbild, IE9 beherrscht multiple Hintergründe und überschreibt somit die erste Information.

Matthias

[blumentopf]

Hallo Matthias

foo {background-image: url('runde Ecke');

background-image: none, none; } /* ungetestet */

> Alle IE verwenden das Hintergrundbild, IE9 beherrscht [multiple Hintergründe](http://selfhtml.apsel-mv.de/hintergrund/hintergrund.html) und überschreibt somit die erste Information.  
  
Das klingt ziemlich raffiniert und müsste dann ja auch bei anderen Browsern wirken.  
Allerdings war das Problem nicht, dass IE das Bild mit den runden Ecken nicht angezeigt hätte, sondern dass es vom DIV mit der Hintergrundfarbe Weiß überdeckt wurde, da die eckigen Ecken herausragen.  
  
@Gunnar  
vielen Dank für den Hinweis, vielleicht funktioniert es besser, wenn ich alle CSS Eigenschaften ordentlich zentral notiere.  
Der Grund für die Verwendung von drei Elementen liegt an der Form der Fläche, einem abegerundeten Rechteck mit einer Aussparung an der unteren Kante.  
  
Ich möchte auch bei IE nicht auf die runden Ecken verzichten, da sie ein wichtiger Bestandteil des Layouts sind, und von Anfang an Teil der Seite waren, in Form einer Hintergrundgrafik. Ich versuche aber gerade, das eleganter hinzubekommen und zu optimieren, deswegen habe ich die Grafik mit drei teils abgerundeten DIVs ersetzt.  
Das führt bei IE8 lte nun zu einem unvorteilhaft veränderten Erscheinungsbild, dem ich nun beikommen will, in dem ich bei den entsprechenden Browsern das Bild statt dem weißgetünchten DIV einblende.  
Vielleicht findet sich die Antwort ja auch in dem verlinkten [Sliding Doors](http://www.alistapart.com/articles/slidingdoors/) Artikel, da bin ich noch nicht durch.  
  
Besten Dank und Grüße

[blumentopf]

..und der langen Rede kurzer Sinn:
am Ende war's ein dummer Schreibfehler, nämlich der Unterschied in der Groß- und Kleinschreibung zwischen
.WeissDiv {display:none}
und
class="Mittelgrund WeissDIV"

Insofern, entschuldigt die Behelligung mit derartigen Problemen und Danke für die anderen Hinweise

[Gunnar Bittersmann]

@@blumentopf:

nuqneH

Sieht jemand den Fehler?

Mehrere.

Gib sämtliche Stilangaben im Stylesheet an, verwende keine Inline-@style-Attribute!

Verwende (möglichst) keine zusätzlichen Elemente zu Darstellungszwecken! Das vorhandene Markup sollte genügen.

Für genau das Element, das deinen Inhalt umschließt und das runde Ecken bekommen soll, gibst du diese – alle vier an:
#foo { border-radius: 70px; }
Die vendorspezifischen Präfixe sind für 'border-radius' nicht mehr erforderlich.

Warum kannst du bei alten IEs nicht auf runde Ecken verzichten?

Wenn dir auf diese Frage eine gute(!!) Begründung einfällt, verwende Sliding Doors.

Qapla'