abgerundete Ecken [CSS] in IE

01/15/2012 00:43 beefm4ker#1
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:
HTML Code:
#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? :-/
01/15/2012 11:30 Jay Niize#2
Schau mal obs damit funktioniert :

HTML Seite :

Code:
<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 :

Code:
#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
01/15/2012 16:03 PseudoPsycho#3
Code:
#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).
01/16/2012 01:03 Fratyr#4
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.
01/16/2012 12:17 PseudoPsycho#5
Was Opera angeht, hast'e Recht, aber der IE sollte sich nach dem W3C-Standard richten und braucht dementsprechend kein Präfix...
01/16/2012 12:38 Fratyr#6
Quote:
Originally Posted by PseudoPsycho View Post
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 :awesome:
01/16/2012 13:31 PseudoPsycho#7
Ja, stimmt. Aber in diesem speziellen Fall halt ausnahmsweise nicht.
01/19/2012 16:57 Vaderfone#8
Ü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.
01/21/2012 22:26 Fratyr#9
Nein, der IE unterstützt seit neustem nun definitiv den border-radius attribut.
01/21/2012 22:44 PseudoPsycho#10
Quote:
Originally Posted by Fratyr View Post
Nein, der IE unterstützt seit neustem nun definitiv den border-radius attribut.
Stimmt. Mal als Beispiel: [Only registered and activated users can see links. Click Here To Register...]
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:
Code:
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="FF=11.0a2;chrome=16;IE=EmulateIE9"><![endif]-->
01/22/2012 14:13 Ennea#11
Quote:
Originally Posted by PseudoPsycho View Post
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:
Code:
<!--[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.
01/22/2012 15:42 PseudoPsycho#12
Quote:
Originally Posted by Ennea View Post
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...
01/22/2012 16:16 Ennea#13
Quote:
Originally Posted by PseudoPsycho View Post
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.


Quote:
Originally Posted by PseudoPsycho View Post
Microsoft selbst empfiehlt sogar, den Tag einzubauen, damit sowas nicht passiert.
Dann will ich nichts gesagt haben.
01/24/2012 15:39 JacK le chilla#14
machts euch doch nicht so schwer und benutzt einfach hintergrundbilder ;)