border-radius und der IE

[Kropff]

Hallo zusammen

da der IE bis einschließlich Version 8 kein border-radius beherrscht, habe ich eine border-radius.htc eingebunden. Das klappt auch ganz gut. ABER!!! Wenn z.B. ein div-Element eine Hintergrundgrafik hat, die über repeat-x horizontal gekachelt wird, so klappt das nicht im IE. Da wird das Bild komplett über die gesamte Fläche gekachelt.

Mittlerweile weiß ich, dass der Hack auf Microsofts Vektor Markup Language beruht. Trotz etlicher Versuche und unzähliger Recherchen habe ich keine Lösung für das Problem gefunden.

Weiß jemand Rat oder kennt ein Script bzw. einen Hack dafür?
Peter

[eagle275]

"Hack" dafür - bau dir den Hintergrund als 2 bzw 3 Bilder - ein Bild für den linken Bogen, 1 für den rechten Bogen, 1 für das Stuck dazwischen

alternativ .. GIB dem Affen Zucker - sprich - die ewig gestrigen mit ihrem Uralt Internet Explodierer bekommen halt keine Bögen, weil deren Browser aus der frühen Jungsteinzeit ( alternativ die Programmierer bei Microsoft aus dieser Geschichtlichen Phase) halt einfach keine Bögen kennt - vielleicht bewirkt es ja den Wunsch in "einigen" der User ENDLICH mal nen Modernen Browser einzusetzen

[Kropff]

"Hack" dafür - bau dir den Hintergrund als 2 bzw 3 Bilder - ein Bild für den linken Bogen, 1 für den rechten Bogen, 1 für das Stuck dazwischen

Ich mache das ganze Buhei doch nur, um diese Bilderorgie zu vermeiden.

alternativ .. GIB dem Affen Zucker - sprich - die ewig gestrigen mit ihrem Uralt Internet Explodierer bekommen halt keine Bögen, weil deren Browser aus der frühen Jungsteinzeit ( alternativ die Programmierer bei Microsoft aus dieser Geschichtlichen Phase) halt einfach keine Bögen kennt - vielleicht bewirkt es ja den Wunsch in "einigen" der User ENDLICH mal nen Modernen Browser einzusetzen

Ich hätte kein Problem damit, wenn es nur den IE6/7 beträfe. Aber die Leuete mit den 8er? Da wird der Kunde mosern. Btw: Opera 11.5 beherrscht bei fieldsets auch kein border-radius.

Peter

PS: So langsam geht mir der Hype mit CSS3 und HTML5 auf die Nerven. Das wird man produktiv doch eh erst ab 2014 einsetzen können.

[eagle275]

das geht auch schon vorher - für alle Konqueror / Firefox / Safari / Chrome User

mit Abstrichen auch die von Opera - wobei es da wohl eher an der Implementation liegt .

Meines Wissens nach schaffen nur 2 Browser die Compliance Tests des W3C für CSS3 jetzt schon ... Opera und Konqueror (beide 100% Score) Firefox / Safari / Chrome kommen etwa auf 75 bis 90% Score) - IE 9 . liegt auch nicht zu schlecht mit ca 70% ... der Rest ist halt "Steinzeit"

Eventuell musst du dann halt ne extensive Browserweiche einbauen - und wenn du wirklich die alten IE-User im Boot haben willst, eben doch mit Bildern arbeiten - mir ist keine andere Lösung für diese Browser bekannt - und richtig besser wirds auch nicht, wenn ich schon wieder diese Beschwerden zum IE 9 lese (von der Geschwindigkeit mal abgesehen .. mein Opera öffnet sich mit 20 Tabs schneller als der IE 9 mit nur 3 ^^)

[Kropff]

... der Rest ist halt "Steinzeit"

Da es den IE9 nicht für XP gibt, kann man den Browser leider nicht ignorieren. Oder willst du mal eben 30 - 40% der Besucher das eigentliche Layout vorenthalten?

Peter

PS: Bei meinem privaten Auftritt baue ich es ein. Da liegt der Anteil der IE-Nutzer eh nur bei 9%. Und die können es dann halt eckig haben.

[mephisto111]

css3pie

Hallo Peter,

die Loesung mit den Hintergrundbildern muss nicht in eine Bilderorigie ausarten, wenn Du mit einem Sprite arbeitest. Ein Bild mit einer Ellipse reicht. In den Ecken des Elements, fuer das Du abgerundete Ecken haben moechtest, platzierst Du dann vier Divs absolut, die jeweils den richtigen Ausschnitt der Ellipse als Hintergrundbild besitzen.

Sonst koennte noch "css3pie" fuer Dich interessant sein. Auf der Seite

Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE

findet sich bezuglich "border-radius.htc" die Formulierung

"Unfortunately it is extremely simplistic. It only supports a single border radius value for all corners, doesn't handle rendering background images which are positioned or have repeat values other than 'repeat', ..."

[Kropff]

...platzierst Du dann vier Divs absolut, die jeweils den richtigen Ausschnitt der Ellipse als Hintergrundbild besitzen.

Ich wollte auch diese div-Orgien vermeiden.

Sonst koennte noch "css3pie" fuer Dich interessant sein. Auf der Seite

Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE

Danke für den Hinweis. Schau ich mir mal an.

Peter

[mephisto111]

Unobtrusive JavaScript

Hallo Peter,

die vier Eck-Container bei der Bilderloesung koennen auch auf "unaufdringliche" Weise per JavaScript (z.B. jQuery) an alle Container mit der Klasse "rounded_corners" gebunden werden. Dann bleibt der HTML-Code sauber.

[Kropff]

die vier Eck-Container bei der Bilderloesung koennen auch auf "unaufdringliche" Weise per JavaScript (z.B. jQuery) an alle Container mit der Klasse "rounded_corners" gebunden werden. Dann bleibt der HTML-Code sauber.

Der bleibt eh sauber. Und ein komplettes JS-Frameworks ist doch ein wenig overdressed. Bei meinem eigenen Auftritt ist mir der IE mittlerweile lattens. Hab es da ganz normal über border-radius gemacht. Unserem Kunden werde ich das wohl ausreden. Der ist eh extrem knickerig und wenn ich ihm sage, dass er damit Geld spart, macht der sofort mit.

Peter

[eagle275]

du übertreibst gern, nicht kropff... da kriegen die pre IE 9 user halt keine abgerundeten Ecken zu sehen - NA UND .. das ist vielleicht 1 % des Layouts.

Bei Nachfragen kann man sauber und ehrlich antworten, dass dies an ihrem Browser liegt - der Rest des Layouts funktioniert doch problemlos ....

[Kropff]

du übertreibst gern, nicht kropff... da kriegen die pre IE 9 user halt keine abgerundeten Ecken zu sehen - NA UND .. das ist vielleicht 1 % des Layouts.

Vertu dich nicht. Wenn ein Auftritt viele Rundungen hat, so wirkt das völlig anders als ohne. Mit sehen die einfach viel weiblicher aus. Und verschiedene Designs? Da drehen die Marketingleute durch.

Peter

[eagle275]

das SIND NICHT verschiedene Designs - es ist immer noch das gleiche Design - nur der plöde Browser kann es nicht darstellen - wenn du halt die nötigen Verrenkungen scheust.

Es ist ja nicht so, dass du die Umwege nicht selbst kennen würdest - Bilder +Divs und soweiter - nur du magst sie nicht ? Dabei ließe sich das wie mephisto schreibt wunderbar automatisieren durch Verwendung von ein wenig geschickt platzierten Javascript

Und bevor du mich hier rund laufen lässt - meinem Auftraggeber sind die Probleme dargelegt worden, und die Entscheidung wurde gefällt ... wer den IE6 einsetzt, der kriegts halt "eckig" zu sehen.
Und die meisten Webseiten, die Runde Buttons im IE darstellen, haben für jeden einzelnen Button ein Bild - eben der Button ohne Beschriftung mit rundgelutschten Ecken. Bei fieldsets / Tabellen / sonstigen Rundungen wird halt mit div-Schachtelung gearbeitet - auch bei solchen Schwergewichten wie ebay / amazon und co

[Kropff]

das SIND NICHT verschiedene Designs - es ist immer noch das gleiche Design - nur der plöde Browser kann es nicht darstellen...

Erklär das einem Designer und nicht mir. Wenn da keine Rundungen sind, ist es für die ein anderes Design.

Es ist ja nicht so, dass du die Umwege nicht selbst kennen würdest - Bilder +Divs und soweiter - nur du magst sie nicht ? Dabei ließe sich das wie mephisto schreibt wunderbar automatisieren durch Verwendung von ein wenig geschickt platzierten Javascript

Da sitze ich gerade dran. Die bisher existierenden htc-Hacks kann man leider vergessen. Auch bei den jQuery-Plugins gibt es massenhaft Probleme.

Und bevor du mich hier rund laufen lässt - meinem Auftraggeber sind die Probleme dargelegt worden, und die Entscheidung wurde gefällt ... wer den IE6 einsetzt, der kriegts halt "eckig" zu sehen.

IE6 alleine wäre auch kein Thema.

Und die meisten Webseiten, die Runde Buttons im IE darstellen, haben für jeden einzelnen Button ein Bild - eben der Button ohne Beschriftung mit rundgelutschten Ecken. Bei fieldsets / Tabellen / sonstigen Rundungen wird halt mit div-Schachtelung gearbeitet - auch bei solchen Schwergewichten wie ebay / amazon und co

Ich wollte halt mal eine saubere und vernünftige Lösung. Scheint es aber nicht zu geben. Vielleicht schaffe ich das mit meiner JS-Programmierung.

Peter

[Kropff]

nur der plöde Browser

OffTopic:

---

Wenn schon so, dann auch richtig! Der plöde Prowser. SCNR.

---

Peter

[eagle275]

breitgrins .. mit meinen Worten halt der InternetExplodierer