border-radius für IE 8?

[hirze]

Guten Tag liebe selfhtml Community,

ich habe im moment in meinem Praktikum den auftrag bestimmte boxen mit "rounded corners" zu versehen.
Habe mich natürlich schon ein wenig erkundigt und dies auch erfolgreich für FireFox erreicht.
Jedoch muss ich dies auch für den Internet Explorer 8 erreichen.
Hättet ihr ein paar Ratschläge für mich um dies zu realisieren?

mfg,
hirze

PS: Danke im Vorraus.

[Cheatah]

Hi,

Hättet ihr ein paar Ratschläge für mich um dies zu realisieren?

im Gegensatz zu übermodernen Techniken, die erst vor sagen wir einem halben Jahrzehnt erfunden wurden, beherrscht der IE seit vielen, vielen Versionen die Darstellung von Grafiken - zumindest rudimentär. Dies hebt ihn von allen anderen Browserfamilien ab.

Zumindest wenn es darum geht, wer gerade mal am Pranger steht.

Alternativ kannst Du die Anforderung auch auf ein annähernd zylindrisches Stück Holz drucken und demjenigen um die Ohren schlagen, der sie gestellt hat. Das Buzzword "Web 2.0" mag zwar durch runde Ecken definiert sein, aber in diesen liegt nicht das Seelenheil der Menschheit. Man möge den Nutzen einer solchen Verzierung dem Aufwand gegenüberstellen, den es für minderwertige und veraltete Produkte wie den IE 8 bedeutet.

Cheatah

[hirze]

Das is dies alles mit Grafiken erreichen kann is mir durchaus bewusst, jedoch soll ich es nicht so machen. ;)

Wenn jemand einen anderen Lösungsweg hat, wäre ich ihm sehr dankbar, da ich langsam daran verzweifle ;)

mfg,
hirze

[Længlich]

Damara!

Wenn jemand einen anderen Lösungsweg hat, wäre ich ihm sehr dankbar, da ich langsam daran verzweifle ;)

Es geht mit VML. Dieses Beispiel funktioniert zwar nicht im IE8, ein anderes aber schon. (Zu letzterem ist aber der Text russisch, deswegen habe ich auch das andere verlinkt.

Ob das jetzt besser ist als Bilder, überlasse ich Dir.

Viele Grüße vom Længlich

[hirze]

Mitterweile habe ich schon einen Block mit runden Kanten verstehen, angewandt habe ich diese Technik.
Problem bei dieser Technik ist nur, das beim ranzoomen die runden Kanten "verpixelt" sind...

Naja, werde hoffentlich einen Lösungsansatz dafür finden. Sollte ich eventuell eine zweite Border drüber setzen?

mfg,
hirze

[Cheatah]

Hi,

Das is dies alles mit Grafiken erreichen kann is mir durchaus bewusst, jedoch soll ich es nicht so machen. ;)

beim IE 8 wurde viel Mühe darauf verwendet, standardkonform zu werden, was bedeutet, dass bestimmte Standards so vollständig wie möglich unterstützt werden, alle anderen jedoch überhaupt nicht. In Sachen CSS bedeutet dies: Der IE 8 unterstützt CSS/2.1 zu annähernd 100%, ergo unterstützt er CSS/3.0 zu annähernd 0%.

Die border-radius-Eigenschaft ist Teil von CSS/3.0. Der IE 8 kann es also nicht. Da border-radius *der* Weg ist, um Ecken abzurunden, gibt es im IE 8 also keinen Weg, um Ecken abzurunden. Simple Logik. Alles was Du finden kannst, sind also Workarounds aus vergangenen Zeitaltern, die da entweder Grafiken wären, oder das Hinzufügen von Massen völlig unnützer Elemente. Wenn jemand letzteres in Kauf nimmt, um Grafiken zu sparen und nicht damit leben zu müssen, dass ein vom Aussterben bedrohter Browser ("Oooooooooooh!") auf ein verzichtbares Layout-Detail verzichten muss, dann gehört ihm die Lizenz zum Atmen abgenommen.

Wenn jemand einen anderen Lösungsweg hat, wäre ich ihm sehr dankbar, da ich langsam daran verzweifle ;)

Der IE kann weniger als jeder andere Browser. Es ist nicht mit guten Lösungen für die Dinge zu rechnen, die in modernen Browsern gut gelöst sind, die der IE jedoch nicht kann. Und ich bin sicher: Bei einer Kosten-Nutzen-Rechnung wäre der Nutzen der runden Ecken durch die Kosten des Aufwandes, den Du allein durch Deine Frage hier im Forum hattest, bereits überschritten.

Cheatah

[hirze]

Das der IE der letzte Müll ist, ist mir durchaus bewusst, er bietet auch eine riesige sicherheitslücke, aber das ist ja wieder ein anderes Thema.
Mein Problem ist halt das ich es im IE umsetzen muss, weil mein Arbeitgeber es nunmal verlangt ;)

@Laenglich: Danke für deine Links, werde mich morgen mal auf Arbeit damit befassen :)

mfg,
hirze

[Længlich]

Tšau!

Das der IE der letzte Müll ist, ist mir durchaus bewusst, er bietet auch eine riesige sicherheitslücke, aber das ist ja wieder ein anderes Thema.

Die alte philosophische Frage, ob man ein Nichts Lücke nennen kann, wenn gar nix außenrum ist. ;-)

Mein Problem ist halt das ich es im IE umsetzen muss, weil mein Arbeitgeber es nunmal verlangt ;)

"Squared corners are not presentable" war die Antwort meines Kunden auf eine Beratung im Sinne Cheatahs, dessen Meinung ich hier durchaus teile. Privat oder bei Kunden, die "graceful degradation" verstehen, mache ich das auch nicht.

@Laenglich: Danke für deine Links, werde mich morgen mal auf Arbeit damit befassen :)

Ich wohl auch. Habe hier nämlich den interessanten Fall, daß auch der übliche Sliding-Doors-ähnliche Ansatz mit Bildern nicht geht, weil der Hintergrund alphatransparent sein muß, und selbst absolut positionierte Bilder oder eine Layout-Tabelle (*würg*, da müßten wir ohnehin nochmal über Entschädigung wegen Aufgabe meiner Würde reden) tun's nicht, weil dabei im Safari auf dem iPad beim Zoomen Rundungsfehler auftreten und Lücken sichtbar werden.
Ich werde also in jedem Fall Browserweichen brauchen, und wenn ich die schon mache (sind nämlich eigentlich auch ausdrücklich nicht gewünscht, aber in irgendeinen sauren Apfel wird der Kunde beißen müssen), kann ich wenigstens die guten Browser mit richtigem CSS versorgen und nur dem IE < 9 irgendeinen scheußlichen Workaround andrehen.

Viele Grüße vom Længlich

[Detlef G.]

Hallo Længlich

… Habe hier nämlich den interessanten Fall, daß auch der übliche Sliding-Doors-ähnliche Ansatz mit Bildern nicht geht, weil der Hintergrund alphatransparent sein muß, …

Eigentlich dürfte der doch funktionieren Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund

… weil dabei im Safari auf dem iPad beim Zoomen Rundungsfehler auftreten und Lücken sichtbar werden.

Das kann ich leider nicht testen.
Ist das schlimmer, als das, was der IE8 beim Seitenzoom öfter mal anstellt?

… die guten Browser mit richtigem CSS versorgen und nur dem IE < 9 irgendeinen scheußlichen Workaround andrehen.

<!--[if lt IE 9]><style type="text/css">body {display:none}<![endif]--> ;-)

Auf Wiederlesen
Detlef

[Længlich]

Góðan daginn!

… Habe hier nämlich den interessanten Fall, daß auch der übliche Sliding-Doors-ähnliche Ansatz mit Bildern nicht geht, weil der Hintergrund alphatransparent sein muß, …

Eigentlich dürfte der doch funktionieren Box mit runden Ecken bei ungleichmäßigem Seitenhintergrund

Eigentlich, ja. Aber auch hier liegen Bilder direkt nebeneinander, was beim Zoomen auf dem iPad / iPhone / iWasweißich mit Lücken und Überlappungen quittiert wird. Überlappungen wären bei opaquen Hintergründen nicht tragisch, bei Alphatransparenz sieht man's aber doch deutlich - ansonsten würde ich einfach die Bilder so gestalten, daß sie sich von vornherein um 1 bis 2 Pixel überlappen.

… weil dabei im Safari auf dem iPad beim Zoomen Rundungsfehler auftreten und Lücken sichtbar werden.

Das kann ich leider nicht testen.
Ist das schlimmer, als das, was der IE8 beim Seitenzoom öfter mal anstellt?

So schlimm ist es: http://praegnanz.de/weblog/pixelluecken-in-ipad-co
Schlimmer als im Firefox 1, der dafür berüchtigt war. Mir persönlich wär's ja wurscht; IMHO muß Apple sich darum kümmern und nicht wir*, aber der Kunde findet Mobile seit ca. 3 Wochen plötzlich ultra-wichtig, und alles muß perfekt sein. Dafür wurden sogar größere Projekte verschoben.

Dabei ist das iPhone doch schon längst out, jetzt kommt das xPhone!

* Für den Firefox haben wir damals auch nix gemacht, und Mozilla hat das Problem mit Version 3.0 aus der Welt geschafft.

… die guten Browser mit richtigem CSS versorgen und nur dem IE < 9 irgendeinen scheußlichen Workaround andrehen.

<!--[if lt IE 9]><style type="text/css">body {display:none}<![endif]--> ;-)

Das wäre ein Traum ... *seufz* ;-)

Viele Grüße vom Længlich

[Matthias Apsel]

Om nah hoo pez nyeetz, Cheatah!

... dass ein vom Aussterben bedrohter Browser ("Oooooooooooh!") ...

Ich behaupte jetzt, der IE6 wird den IE8 überleben.

Matthias

[Felix Riesterer]

Lieber Matthias,

Ich behaupte jetzt, der IE6 wird den IE8 überleben.

war das je zweifelhaft?

Liebe Grüße,

Felix Riesterer.

[hirze]

Will ja niemanden angreifen, aber ist das das Thema dieses Threads?

mfg,
hirze

[Felix Riesterer]

Liebe(r) hirze,

Will ja niemanden angreifen, aber ist das das Thema dieses Threads?

Du siehst gerade ein hier übliches Phänomen welches man Threaddrift nennt. Mehr dazu in der Charta (siebter Punkt bei den Verhaltensrichtlinien für alle Poster).

Liebe Grüße,

Felix Riesterer.

[Cheatah]

Hi,

... dass ein vom Aussterben bedrohter Browser ("Oooooooooooh!") ...
Ich behaupte jetzt, der IE6 wird den IE8 überleben.

in der Tat, der IE 9 wird IE 8 und IE 7 verhältnismäßig schnell auf ein Niveau bringen, das der IE 6 derzeit besitzt und vermutlich noch ein Weilchen besitzen wird. Getreu dem Motto: Ich würde nicht mal neun _Monate_ alte Milch trinken.

Cheatah

[Gunnar Bittersmann]

@@Cheatah:

nuqneH

Der IE 8 unterstützt CSS/2.1 zu annähernd 100%, ergo unterstützt er CSS/3.0 zu annähernd 0%.

IE 8 sollte ‘text-align-last’ [CSS3-TEXT §7.2] unterstützen, was es in CSS 2.1 nicht gibt.

Und jetzt wirst du mir die Bedeutung von „zu annähernd“ erklären … ;-)

Qapla'

[Brillo]

Hallo,

ich habe im moment in meinem Praktikum den auftrag bestimmte boxen mit "rounded corners" zu versehen.

ach, du Armer. Runde Ecken... und das für den IE >= 6? Und dann auch noch ohne zu dem in diesem Fall einzig sinnvollen Mittel der Hilfsbildchen greifen zu dürfen?

=> Verweigere diesen Auftrag. Es ist ein sinnloses Unterfangen. Und sinnlose Aufträge sollten -generell- verweigert werden. Wir hätten sehr viel weniger Probleme auf dieser Welt. Es sei denn, es gibt einen wirklich vernünftigen Grund, dies zu tun. Dann guck mal hier. Vielleicht ist das ja was. Keine Ahnung, ich hasse runde Ecken.

[hirze]

Ich danke dir Brillo,
werd es sofort ausprobieren, hoffe das das den gewünschten erfolg bringt :)

mfg,
hirze