Follow us on Twitter

Fan werden

Runde Ecken ohne Bilder, auch für den IE

Mi. 17.03.2010

Runde Ecken waren ja schon immer voll im Trend. Ob das immer sein muss, sei mal dahingestellt. Alle modernen Browser, außer natürlich unser aller Liebling der IE, können runde Ecken ohne Bilder generieren. Dazu reichen diese Zeilen im CSS:

.curved {
-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /
}

Anstatt nun, nur wegen dem IE Bilder zu nutzen, empfiehlt sich der Einsatz einer IE Behavior Datei(*.htc).

http://code.google.com/p/curved-corner/

Damit ausgestattet, reicht es aus das obige CSS mit dieser Zeile zu ergänzen:

behavior: url(border-radius.htc);

#1 Verfasst von Gast (nicht überprüft) am 18. März 2010 - 20:49.

Bin über Facebook hierüber gespolpert. Super. Nicht dieser Artikel sondern eben die Tatsache, dass er bei Facebook zu finden ist. Hey, und dieses Kommentarformular sieht eher so aus wie bei WP und nicht wie bei Drupal. Klasse.
Und ich habe gerade gemerkt, dass ich mich über neue Kommentare benachrichtigen lassen kann, ohne überhaupt eure Site besucht zu haben. Erstaunlich.

#2 Verfasst von Gerriet (nicht überprüft) am 23. März 2010 - 15:17.

Es geht auch mit JQuery *gg hier ein Modul, was ich grade gefunden habe.

http://drupal.org/project/rounded_corners

#3 Verfasst von Gast (nicht überprüft) am 23. März 2010 - 16:32.

Der Nachteil daran ist, dass es dann bei deaktiviertem JS auch im FF und anderen modernen Browser nicht geht. Bei der hier vorgeschlagenen Lösung werden ohne JS die runden Ecken halt nur im IE nicht angezeigt.

#4 Verfasst von Peter (nicht überprüft) am 18. Juni 2010 - 9:41.

Hi,

die Darstellung von runden Ecken ohne Grafiken funktioniert beim Firefox, Chrome sowie Safari gut. Der Workaround für die Internet Explorer mittels HTC-Datei funktioniert nicht zuverlässig. Zudem benötigt die HTC-Datei eben Javascript.

Ich empfehle runde Ecken mit CSS-Sprites.

Viele Grüße,
Peter

Kommentar hinzufügen

  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><img><div>
  • Zeilen und Absätze werden automatisch erzeugt.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

Weitere Informationen über Formatierungsoptionen