Hi All,

die CSS-Anwendung im IE ist schon eine sch... Sache. Nicht dass er vieles nicht unterstüzt, er setzt einiges auch nicht um, obwohl die Anweisungen stimmen.

Beispiel:
Ich habe eine DIV-Box in der wiederum eine DIV-Box ist. Der äußeren Box vergebe ich ein "border-radius: 5px;" und der inneren "border-top-left-radius:3px; border-top-right-radius:3px;".

Die äußere Box setzt er mir um aber bei der inneren NICHT!

Ich habe als Test bei der inneren Box auch mal die Border-Anweisung auf "border-radius: 10px;" gestellt. Er nimmt für die innere einfach keine Anweisung an!

Dieses Phänomen ist nicht nur beim Border auch beim gradient etc.

Bei all den anderen Browsern funktioniert alles super.
Wieso passieren solche Sachen im IE?!?!?!
(den sollte man echt abschaffen!!!)


Vielen Dank schon mal im Voraus für euere Hilfe....


Edit:
OS=Win7, ie=9
CODE-SAMPLE:
.nav_box_top { color:white; height:18px; padding-top:4px;padding-left:5px;
border-top-left-radius:4px; border-top-right-radius:4px;border: 1px solid #2a428e;
background-color: #2a428e;
background: -moz-linear-gradient(top center, #2a428e, #021f47);
background: -webkit-gradient(linear, center top, center bottom, from(#2a428e), to(#021f47));
background: -o-linear-gradient(top, #2a428e, #021f47);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#2a428e, EndColorStr=#021f47)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a428e', endColorstr='#021f47');
}

ich habe entdeckt, dass der gradient Verlauf und Border-radius Anweisung sich beißen. Der Gradient überdeckt den Border, darum sind keine Rundungen zu sehen.
Gibt es da abhilfe?

Eine Lösung gibt's doch...

Hier ein Beispiel: http://jsfiddle.net/HDfNJ/12/
Es braucht nur ein umgebendes Element mit overflow: hidden bei dem dann auch die radius-Definition erfolgt.

Bisher hab ich kein Problem gesehen.

Im IE10 soll (laut kommentar in css3please.com) dann auch -ms-linear-gradient verfügbar sein..

Edit: Border-Problem von http://jsfiddle.net/HDfNJ/11/ behoben
Edit: URLs richtig definiert

Soweit ich weiß gibt es da nur ein Workaround mit einer SVG Grafik, anders habe ich es leider auch noch nicht gesehen... Falls diese Lösung für dich in Frage kommt, kannst du HIER ein Tutorial und eine entsprechende Erklärung finden.