Hallo,
der body meiner Seite bekommt einen Hintergrund per CSS3 bzw. für den IE per Filter. Sieht im CSS so aus:
body {
width: 960px;
margin: 20px auto;
background: white;
-moz-box-shadow: 8px 8px 20px 0px black;
-moz-border-radius: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=6, offy=6)"
filter:progid:DXImageTransform.Microsoft.DropShadow(color=black, offx=6, offy=6);
}
Der Header der Seite wird per Image Replacement (Glider-Levin) mit einer Grafik überdeckt. Schaut euch die Seite mal an:
wie ihr seht, hat die Grafik abgerundete Ecken. Beim Firefox klappt alles wunderbar. Das Problem tritt beim IE auf. Per Filter kann ich ja beim IE keinen Schatten für abgerundete Ecken setzen, trotzdem behält die Grafik die über den Header gelegt wird aber ihre runden Ecken. Der Schatten und die Grafik im Header passen also nicht zusammen.
Wie löse ich denn dieses IE-Problem am besten. Nehme ich mir eine zweite Headergrafik die keine abgerundeten Ecken hat und setze diese, falls die Seite mit dem IE gelanden wird?
Gibt es vielleicht andere Lösungsvorschläge?