| 

.NET C# Java Javascript Exception

2
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?
News:
29.07.2011
ILLmaxon 125 1 5
1
Hast Du mal ein Code-Sample?
Golo Roden 29.07.2011
1
Kann ich nicht bestätigen...

http://jsfiddle.net/HDfNJ/1/
WolfgangKluge 29.07.2011
1
Welche IE-Version auf welchem OS?
Matthias Hlawatsch 29.07.2011
1
IE-Version muss 9+ sein, davor gab es border-radius ja noch gar nicht (auch in der äußeren Box nicht) ;)
Dementsprechend auch mindestens Vista...
WolfgangKluge 29.07.2011
Auf die Beantwortung dieser Frage war ein Kopfgeld in Höhe von 100 Reputationspunkten ausgesetzt. Das Kopfgeld wurde bereits vergeben.
2 Antworten
2
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
15.08.2011
WolfgangKluge 1,0k 2 7
1
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.
12.08.2011
Dustin Klein 2,9k 2 9

Stelle deine Html-Frage jetzt!