Optimierung für den Internet Explorer

[HanSolo]

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:

Seite

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?

[LX]

Ich würde den Lösungsansatz "graceful degradation" empfehlen, d.h die Hintergrundgrafik so umstellen, dass sie auch bis in die Ecken geht, und das Abrunden border-radius überlassen. Dann ist die Seite im IE zwar eckig, sieht aber wenigstens konsistent aus.

Alternativ kannst Du im IE eine etwas andere Konstruktion wählen, bei der die grafischen Elemente per Hintergrundgrafik(en) eingebunden werden, wenn Dir die runden Ecken so viel bedeuten.

Gruß, LX

[HanSolo]

Ich würde den Lösungsansatz "graceful degradation" empfehlen, d.h die Hintergrundgrafik so umstellen, dass sie auch bis in die Ecken geht, und das Abrunden border-radius überlassen. Dann ist die Seite im IE zwar eckig, sieht aber wenigstens konsistent aus.

Super Idee, so mach ich das. Besten Dank :-).

Alternativ kannst Du im IE eine etwas andere Konstruktion wählen, bei der die grafischen Elemente per Hintergrundgrafik(en) eingebunden werden, wenn Dir die runden Ecken so viel bedeuten.

Naja, die runden Ecken hätte ich schon gerne, allerdings sieht es doch blöd aus, wenn die eigentliche Seite zwar runde Ecken hat, der Schatten aber eckig ist. Dann lieber komplett eckig oder gibt es vieleicht irgendeinen Trick um auch beim IE den Schatten rund zu bekommen, ohne jetzt mit Bildern arbeiten zu müssen.

[MudGuard]

Hi,

Seite

wie ihr seht, hat die Grafik abgerundete Ecken. Beim Firefox klappt alles wunderbar.

Es ist also Absicht, daß links oben hinter der abgerundeten Graphik das M und ein kleines Teil vom o zu sehen ist?

cu,
Andreas

[Gunnar Bittersmann]

@@HanSolo:

nuqneH

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);
}
[/code]

Dass es außer Mozillas und IEs noch andere Browser gibt und diese mit den ihnen eigenen Präfixen bedient werden möchten, ist dir unbekannt?

Du hättest in deinem Thread bleiben sollen, dort ist ein Beispiel verlinkt. Für einen neuen Thread (Doppelposting) gab es keinen Grund.

Qapla'