abgerundete Ecken [CSS] in IE

[beefm4ker]

Hallo!
ICh habe bei der Suche mit Google gefunden, dass ich ein .htc file einbinden muss. Dies habe ich auch getan, allerdings wenn ich mir die fertige Seite dann im IE angucke verschwindet der Rest meiner Style-Deklarationen :-/ Meine Bereichsdeklaration sieht so aus:

#bubble
{
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-khtml-border-radius:15px;
	border-radius:10px;
	padding-left: 5px;
	margin-top: 5px;
	background-color: #FFFFFF;
	behavior:url(css/border-radius.htc);
 }

Die Ecken sind im Firefox abgerundet und der Hintergrund stimmt auch... Wenn ich nun mit IExplorer das die gleiche Page aufrufe, sehe ich nur die Texte untereinander anstatt in Formen mit abgerundeten Ecken. Lasse ich nun das behavior-tag weg, wird zwar der Inhalt in den Boxen angezeigt, allerdings ohne abgerundete Ecken.
Was ist falsch, dass es nicht so angezeigt wird wie ich will? Hab ich irgendwas falsch gemacht? :-/

[Jay Niize]

Schau mal obs damit funktioniert :

HTML Seite :

<div class="runde-ecken">
    <div class="b1">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b4">&nbsp;</div>
</div>
<div id="content">
Text text Text
</div>
<div class="runde-ecken">
    <div class="b4">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b1">&nbsp;</div>
</div>

CSS :

#content {
    color:#fff;
    width:398px;
    background-color:#000;
    margin:auto;
    border-left:solid 1px #000;
    border-right:solid 1px #000;
}
.runde-ecken {
    margin:auto;
    width:400px; /* Die Breite des ganzen */
    height:5px; /* Die Höhe des ganzen */
    font-size: 0px; /* für IE */
    line-height: 1px; /* für IE */
    min-height: 1px; /* für IE */
}
.runde-ecken .b1 {
    background:#000;
    height:1px;
    margin:0 5px;
}
.runde-ecken .b2 {
    background:#000;
    height:1px;
    margin:0 3px;
}
.runde-ecken .b3 {
    background:#000;
    height:1px;
    margin:0 2px;
}
.runde-ecken .b4 {
    background:#000;
    height:2px;
    margin:0 1px;
}

Nicht von mir.

~Greetings

[PseudoPsycho]

#bubble {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-khtml-border-radius:15px;
	border-radius:10px; }

würde in meinen Versuchen bereits ausreichen.
Der IE9 richtet sich nach border-radius, Firefox nach -moz-border-radius
und Konqueror müsste sich nach -khtml-border-radius richten...
Soll heißen, im IE9 klappt es auch ohne die .htc, in den älteren IE-Versionen nicht, aber da bringt auch die .htc nicht...
Die einzige wirklich krossbrowserkompatible Methode wäre demnach ein Hintergrundbild mit abgerundeten Ecken (+ background-repeat:no-repeat).

[Fratyr]

IE hat wie firefox und chrome soweit ich weiß auch
ein prefix für den border radius, zumindest meine ich das
schonmal irgentwoe gesehen zu haben. Probiers mal mit
-ie-border-radius, opera braucht übrigens auch ein präfix,
nämlich -o-border-radius. Ab welcher Version der IE das
unterstützt weiß ich allerdings nicht.

[PseudoPsycho]

Was Opera angeht, hast'e Recht, aber der IE sollte sich nach dem W3C-Standard richten und braucht dementsprechend kein Präfix...

[Fratyr]

Originally Posted by PseudoPsycho

Was Opera angeht, hast'e Recht, aber der IE sollte sich nach dem W3C-Standard richten und braucht dementsprechend kein Präfix...

Der IE ist wohl der einzige Browser der W3C Standarts gekonnt ignoriert

[PseudoPsycho]

Ja, stimmt. Aber in diesem speziellen Fall halt ausnahmsweise nicht.

[Vaderfone]

Über Css kannst du das für keine Art von Internet Explorer momentan lösen. Die einzige Möglichkeit ist mit Bildern als Hintergrund zu arbeiten, dann sind aber leider die Größen fix..

Meines Wissens gibt es keine andere Möglichkeit.

[Fratyr]

Nein, der IE unterstützt seit neustem nun definitiv den border-radius attribut.

[PseudoPsycho]

Originally Posted by Fratyr

Nein, der IE unterstützt seit neustem nun definitiv den border-radius attribut.

Stimmt. Mal als Beispiel:
In allen getesteten Browsern (ausgenommen IE8 und niedriger) werden die Ecken der Eingabefelder abgerundet. Der IE9 richtet sich nach dem W3C-Standard border-radius, Firefox nach -moz-border-radius und so weiter...
Die Angabe der .htc kann man einfach weglassen...

Nachtrag: Könnte natürlich sein, dass der IE9 in den Kompatibilitätsmodus springt und daher die Ecken nicht abrundet. Für den Fall einfach im Head ergänzen:

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="FF=11.0a2;chrome=16;IE=EmulateIE9"><![endif]-->

[Ennea]

Originally Posted by PseudoPsycho

Nachtrag: Könnte natürlich sein, dass der IE9 in den Kompatibilitätsmodus springt und daher die Ecken nicht abrundet. Für den Fall einfach im Head ergänzen:

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="FF=11.0a2;chrome=16;IE=EmulateIE9"><![endif]-->

Sowas sollte man sich sparen. Einfach darauf achten, dass der richtige Doctype verwendet wird.

[PseudoPsycho]

Originally Posted by Ennea

Sowas sollte man sich sparen. Einfach darauf achten, dass der richtige Doctype verwendet wird.

Was hat denn der Doctype damit zu tun???
Ich habe schon diverse Seiten in HTML5 gebastelt und der IE springt trotzdem in den Komp.-Modus... -.-
Microsoft selbst empfiehlt sogar, den Tag einzubauen, damit sowas nicht passiert. Und wenn man meine Methode verwendet, sieht's halt für alle anderen Browser wie 'n Kommentar aus, sodass man auch bzgl. Validität keine Probleme bekommen sollte...

[Ennea]

Originally Posted by PseudoPsycho

Was hat denn der Doctype damit zu tun?

Da gab es von Microsoft mal einen Eintrag in der Knowledge Base, der damit zu tun hatte. Demnacht macht es IE am Doctype fest, ob es in den Compatibility Mode springt oder nicht. Ist allerdings lange her, dass ich das gelesen hatte, scheint aber dennoch auch noch auf den 9er IE zuzutreffen.

Originally Posted by PseudoPsycho

Microsoft selbst empfiehlt sogar, den Tag einzubauen, damit sowas nicht passiert.

Dann will ich nichts gesagt haben.

[JacK le chilla]

machts euch doch nicht so schwer und benutzt einfach hintergrundbilder