blumentopf: Browserweichen für border-radius Alternative

Beitrag lesen

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