nicht angemeldet
Hallo,
ich versuche gerade mir eine Button-Klasse zu basteln, mit der ich eine Art 3d-look hinbekomme, die Klassen dazu sehen in etwa so aus:
.linkbutton{ width:100%; border-top:2px solid #cccccc; border-left:2px solid #cccccc; border-bottom:2px solid #444444; border-right:2px solid #444444; background:#888888; }
.linkbutton:hover{ width:100%; border-top:2px solid #444444; border-left:2px solid #444444; border-bottom:2px solid #cccccc; border-right:2px solid #cccccc; background:#888888; }
(ich mach auch noch angaben zum font, die sind aber glaub ich fürs Prinzip überflüssig)
<a class="linkbutton" href="blabla.htm">Mein Button</a>
Ich versuche also mittels vertauschen der Border-definitionen eine 3d-Rahmen zu erzeugen. So weit so gut, im FF klappt das auch ganz gut, im IE fehlen dagegen schonmal oberer und unterer Rahmen :(
Mit der Breite bin ich nicht glücklich, also packe ich in meinen Link noch ein DIV, z.B:
<a href="blabla.htm"><div width="200" class="linkbutton>Mein Button</div></a>
In FF passiert genau das was ich beabsichtige, ich bekomme einen rechteckigen Button mit 3d-effekt (der auf der ganzen Fläche auf hover und anklicken reagiert).
Im IE6 dagegen habe ich jetzt zwar korrekte Rahmen, hover funktioniert gar nicht mehr und der Cursor ändert sich beim drüberfahren zu "text". Aufs anklicken reagiert er zwar noch korrekt (blabla.htm kommt), nur nach button sieht das Verhalten echt nicht mehr aus...
Kennt jemand eine (reine CSS-) Lösung die auch der IE6 peilt?
Gruss
Michael