Webkit Button-Styling

[htmlfreK]

Hallo.

Ich möchte gerne Buttons mit runden Ecken habem.
Das soll ohne CSS 3 gemacht werden da es noch nicht jeder unterstützt.
also ist mein Button so aufgebaut:

<button type="submit" class="submitbutton"><span class="submitbutton_1"></span>Speichern<span class="submitbutton_2"></span></button>

Da first-child und last-child auch noch nicht von jedem unterstützt werden hat der button zwei spans drin.
 Und so sind sie "gestyled":

  
.submitbutton {background:url(/Img/d/submitbutton.png) center repeat-x ;height:22px ;border:none ;cursor:pointer; }  
  
.submitbutton_1{background:url(/Img/d/submitbutton_1.png) left top no-repeat;width:4px ;min-width:4px;height:22px; float:left ;margin-left:-12px;margin-top:-2px}  
  
.submitbutton_2{background:url(/Img/d/submitbutton_2.png) right top no-repeat ;width:5px ;min-width:5px;height:22px ;float:right ;margin-right:-14px;margin-top:-2px}  

Im FF sieht das klasse aus, IE macht sogar auch mit. Probleme machen die Webkit-browser Safari und Chrome.

.submitbutton wird korrekt dargestellt.

.submitbutton_1 und .submitbutton_2 allerdings nicht!
Hier ist es auch egal wie ich die margin-Werte änder und es macht auch keinen Unterschied ob ich die spans auf display:block setze. Es wird einfach so getan, als ob die spans nicht existieren würden.

Könnt ihr mir weiterhelfen?

Beste Grüße,
htmlfreK

[ChrisB]

Hi,

Im FF sieht das klasse aus, IE macht sogar auch mit. Probleme machen die Webkit-browser Safari und Chrome.

Und nachvollziehen können wir das, sobald du ein valides, auf's wesentliche reduziertes Online-Beispiel bereitstellst.

MfG ChrisB

[htmlfreK]

Und nachvollziehen können wir das, sobald du ein valides, auf's wesentliche reduziertes Online-Beispiel bereitstellst.

Hey würde ich echt gerne tun nur leider sind mir da die Hände gebunden.
Es ist aber 100% XHTML Strict valide ohne weitere Warnungen.
Es klappt wie gesagt auch nur in den Webkit Browsern nicht.

[Felix Riesterer]

Lieber htmlfreK,

ich vermute mal, dass Webkit das Styling von Formularelementen in gewissen Details nicht umsetzt. Warum das so sein könnte, vermag ich nicht zu beantworten, ich weiß nur, dass solche GUI-Dinge problematisch zu stylen sind. Hier ist ein (englischer) Artikel zu diesem Thema, der es im Detail erläutert.

Liebe Grüße,

Felix Riesterer.

[Tim Tepaße]

.submitbutton_1{background:url(/Img/d/submitbutton_1.png) left top no-repeat;width:4px ;min-width:4px;height:22px; float:left ;margin-left:-12px;margin-top:-2px}

Ich weiß nicht, ob es Dir aufgefallen ist, aber Du hast hier ein width von 4px angegeben. Stelle ich es auf auto bzw. lasse ich es weg, funktioniert es.

[htmlfreK]

.submitbutton_1{background:url(/Img/d/submitbutton_1.png) left top no-repeat;width:4px ;min-width:4px;height:22px; float:left ;margin-left:-12px;margin-top:-2px}

Ich weiß nicht, ob es Dir aufgefallen ist, aber Du hast hier ein width von 4px angegeben. Stelle ich es auf auto bzw. lasse ich es weg, funktioniert es.

Ja klar, weil meine linke Seite 4px breit ist und meine rechte 5px breit.
Wenn ich width rausnehme dann geht es in den webkit Browsern immernoch nicht =/ Hast du sonst noch etwas verändert`?

[Benjamin Buxbaum]

Hi htmlfreK!

Ja klar, weil meine linke Seite 4px breit ist und meine rechte 5px breit.
Wenn ich width rausnehme dann geht es in den webkit Browsern immernoch nicht =/ Hast du sonst noch etwas verändert`?

Du hast so gut wie keine Chance, Apples Form-Elemente optisch anzupassen. Damit musst Du leben.

mfG
Benjamin

[Felix Riesterer]

Lieber Benjamin,

Du hast so gut wie keine Chance, Apples Form-Elemente optisch anzupassen. Damit musst Du leben.

mir glaubt man anscheinend nicht, denn das habe ich auch schon behaputet...

Liebe Grüße,

Felix Riesterer.

[Tim Tepaße]

Du hast so gut wie keine Chance, Apples Form-Elemente optisch anzupassen. Damit musst Du leben.
mir glaubt man anscheinend nicht, denn das habe ich auch schon behaputet...

Ähm. Nutzt ihr Webkit eigentlich? Als Nutzer stoße ich andauernd auf angepasste und gestylte Buttons, ohne dass da große Verrenkungen gemacht wurden. Safaris und Webkits Formularelemente sind definitiv anpassbar.

In 2005 wurde das ganze in Webkit implementiert: Checkboxen, Radiobuttons, http://webkit.org/blog/28/buttons/@title=Buttons und http://webkit.org/blog/51/text-fields/@title=Textfelder. Im wesentlichen versucht Webkit, bei optischer Anpassung diverser Eigenschaften die Formularelemente entsprechend anzupassen. Wenn man direkt mit einer CSS-Box umgehen und alles mögliche anpassen will, muss man –webkit-appearance auf none stellen. (appearance ist eine Eigenschaft aus CSS 3 UI). Maciej Stachowiak, ein Webkit-Entwickler, erklärt das hier ausführlicher.

(-webkit-appearance würde aber trotzdem wegen des Float-Bugs nicht des OPs Problem lösen; außerdem ist es erst seit Safari 3.0 enthalten, der gleichen Version, seit der es auch border-radius gibt.)

[Tim Tepaße]

Hast du sonst noch etwas verändert`?

Ja, ich habe nicht aufgepasst und mitgedacht, als ich Deine Angaben in einen Testcase umgewandelt habe. ;)
Beim zweiten Versuch konnte ich dann Deine Probleme nachvollziehen.

Ich habe dann etwas rumgetestet und kam auf diese Fehlerquelle: Bei <button> kann Webkit offenbar nicht mit außerhalb der Box positionierten Floats umgehen. Das war mir dann doch neu. Externes Positionieren mit position: relative geht übrigens; allerdings hat relative ja immer das Problem, dass die Lücke an der originalen Position bleibt.

Ich rate Dir, dass Du einfache Deine die Hintergrundbilder tragenden Spans innerhalb des Buttons positionierst und dem Button den Rahmen und die Hintergrundfarbe weg nimmst.

Ich habe da mal ein Beispiel vorbereitet:

• Ich habe das linke und das rechte Span jeweils mit passendem border-radius ausgestattet; einfach weil ich keine passenden Hintergrundbilder zur Hand hatte. Du solltest die Angaben einfach ersetzen können.
• Alternativ zur Positionierung mit Floats könnte man sich auch das display:table-Modell vorstellen, aber Du willst ja auch Rücksicht auf minderwertige Browser nehmen.
• Und für minderwertige Browser solltest Du auch noch die nth-child-Pseudoklassen durch echte Klassen ersetzen.

[Gunnar Bittersmann]

@@htmlfreK:

nuqneH

Ich möchte gerne Buttons mit runden Ecken habem.
Das soll ohne CSS 3 gemacht werden da es noch nicht jeder unterstützt.

Das wäre unsinnig. Alle großen Browser außer IE unterstützen (*-)border-radius, also nutze es! Für IEs kannst du immer noch einen Würgaround basteln, wenn’s denn unbedingt sein muss.

Qapla'

[htmlfreK]

Hey.

Das wäre unsinnig. Alle großen Browser außer IE unterstützen (*-)border-radius, also nutze es! Für IEs kannst du immer noch einen Würgaround basteln, wenn’s denn unbedingt sein muss.

Und wenn ich nur die oben linke und oben rechte Ecke haben will?
Definiere alle großen Browser.
Ich brauche:
Opera, Safari, Chrome, FF 2 (LEIDER), FF3, FF 3.6, IE 6 (LEIDER) ,7,8,9
Und natürlich Konquerer.

[suit]

Und wenn ich nur die oben linke und oben rechte Ecke haben will?

Dann hast du die Doku nicht gelesen.

Definiere alle großen Browser.
Ich brauche:
Opera, Safari, Chrome, FF 2 (LEIDER), FF3, FF 3.6, IE 6 (LEIDER) ,7,8,9
Und natürlich Konquerer.

Viel Spaß beim formatieren:

<span class="submit"><span class="before"></span><input type="submit" /><span class="after"></span></span>

[Gunnar Bittersmann]

@@htmlfreK:

nuqneH

Und wenn ich nur die oben linke und oben rechte Ecke haben will?

Dann gibts du eben dies an.

Definiere alle großen Browser.

Chrome, FF, IE, Opera, Safari nicht älter als die jeweils vorletzte Version.

Ich brauche:

Definiere „ich brauche“.

FF 2 (LEIDER)

Der ist mausetot. Von Mozilla schon lange nicht mehr supportet, Sicherheitslöcher bleiben sperrangelweit offen. Wer den noch benutzt, ist selbst schuld. Und es gibt keinen Grund, ihn nicht upzudaten.

IE 6 (LEIDER)

Der ist von Microsoft mausetotgesagt. Zwar noch verbreiteter als FF 2, dennoch: Wer den noch benutzt, ist selbst schuld. Oder der Systemadmin, aber dann muss man dessen Schlamperei ja nicht noch unterstützen.

[IE] 9

Sehr witzig. Wie willst du etwas unterstützen, was es so noch gar nicht gibt?

Und natürlich Konquerer.

Was hast du für Randgruppen als Zielpublikum? Und sollte der irgendwie Probleme bereiten?

Qapla'

[apsel]

Om nah hoo pez nyeetz, htmlfreK!

Und wenn ich nur die oben linke und oben rechte Ecke haben will?

Gunnar hat da mal was vorbereitet.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

Gunnar hat da mal was vorbereitet.

Sag ich doch.

Qapla'