runde ecken f. firefox & opera

[SyN0]

ich hab in s9y ( http://clubholzhausen.de ) runde ecken implementiert.

in chrome und firefox funktioniert das super.
in opera seh ich bloß oben runde ecken, am footer schon nicht mehr.

wo ist der haken?

der gesamte code sieht wie folgt aus:

Code: Select all

#wrapper {
    width: 944px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 69%;
    background-color: #ffffff;
    border: 0px solid #dfdfdf; /* #825600; */
    margin: 0px auto;
	border-radius: 20px;
	-moz-border-radius:20px; /* Firefox */
	-webkit-border-radius:20px; /* Safari, Chrome */
	-khtml-border-radius:20px; /* Konqueror */
}

#serendipity_banner {
    height: 136px;
	margin: 4px;
    /* border: 3px; */
	border-radius: 20px;
	-moz-border-radius:20px; /* Firefox */
	-webkit-border-radius:20px; /* Safari, Chrome */
	-khtml-border-radius:20px; /* Konqueror */
}

[Timbalu]

Manchmal geht soetwas "o-border-radius: blah;", oder man muss den neuen Opera mit webkit verwenden.
Das border-radius: 20px; würde ich ans Ende der Reihe setzen.

[SyN0]

-o- geht nur bis opera 9.x, ab 10.x funktioniert das nicht mehr

was heisst, opera mit webkit verwenden? ist das ein plugin? wenn ja, bringt das nichts, weil man das nicht vom normalanwender verlangen kann.


witzigerweise hat der schatten unten eine rundung ^^

[Timbalu]

Nee, es meint die neu eingesetzte Engine; das ist "Opera 14" - Die verwendete WebKit-Version mit der Nummer 537.22 entspricht der in Chrome 25;

Das mit den runden Ecken mag sich vielleicht ähnlich verhalten wie mit manchen IE Versionen, die immer irgendwie anders reagierten und ein zusäzliches div benötigten, um das ordentlich zu rendern (soweit ich mich erinnere). Oder man muss es vom unteren Rand absetzen mit einem margin-bottom...

[yellowled]

TL;DR: Ich würde, offen gesagt, darauf pfeifen. So viele Opera-Besucher wirst Du nicht haben, die paar können das Blog auch ohne runde Ecken nutzen. Der Aufwand, das zu fixen, lohnt nicht. Allerdings würde ich die Fehler, die der Validator moniert, mal prüfen.

Jetzt könnte ich ja zunächst mal argumentieren, dass runde Ecken kein wesentliches Designelement sind und es normalerweise überhaupt nichts macht, wenn sie in einem Browser, der border-radius (ggf. auch mit Präfix) nicht unterstützt, nicht funktionieren. Das funktioniert aber immer nur so mittelgut. (Generell könnte man diskutieren, ob man Opera überhaupt ausdrücklich unterstützten muss, speziell mit so nebensächlichen Gestaltungsdetails wie runden Ecken; die Verbreitung von Opera ist relativ dürftig.)

Außerdem: Nein, es gibt kein Opera-Präfix für border-radius, also kein -o-border-radius. Gab es auch nie. Und ja, Opera wird seine eigene Rendering-Engine (Presto) einstellen und Webkit verwenden – meines Wissens gibt es bisher aber nur Beta-Versionen mit Webkit. Last not least, ob man zuerst die Präfix-Statements oder die „richtige“ Version ohne Präfix angibt, kann man – auch z.T. abhängig von der konkreten CSS-Eigenschaft – diskutieren. (Wobei die „best practise” klar ist, die Präfix-Versionen zuerst aufzulisten.)

Im Fall von border-radius kann man mittlerweile relativ getrost auf die Präfixe verzichten. So ziemlich alle Browser beherrschen border-radius mittlerweile ohne Präfix; für die, die es nicht unterstützen (IE8), gibt es kein Präfix.

Falls Du das auf Teufel komm raus doch debuggen willst (ich hab hier grad keine Opera zur Hand), würde ich damit anfangen – nachdem Du die Validator-Fehler behoben hast; auch die können für Darstellungsfehler verantwortlich sein, gerade in Opera, der Webstandards besonders streng auslegt –, dem Wrapper mal ordentlich margin-bottom zu verpassen. Eventuell wird nur der Teil der Footers mit den runden Ecken irgendwie überlagert oder abgeschnitten.

YL