nicht angemeldet
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
Gunnar Bittersmann