Rollover-Effekt Button nur mit CSS im IE6 nicht möglich?

[Michael S.]

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

[korn]

Mit der Breite bin ich nicht glücklich, also packe ich in meinen Link noch ein DIV, z.B:

Dazu brauchst du aber kein DIV, du kannst das über padding geregelt bekommen ;-)

Woran das beim IE6 liegen könnte, weiß ich nicht :-(

[Julian Hofmann]

Hallo.

Mit der Breite bin ich nicht glücklich, also packe ich in meinen Link noch ein DIV, z.B:

Damit verletzt Du die (X)HTML-Spezifikation, da Du ein Blockelement (div) in ein inline-Element (a) packst. Dass FF das (aus Deiner Sicht) richtig darstellt ist eher als Zufall zu sehen, als dass es die Entwickler wohl so gewollt haben. Und dass der IE nicht durchblickt, was er machen soll, das ist dann auch logisch - für diese Verschachtelung hat man ihm ja kein korrektes Verhalten beigebracht, da kein korrektes HTML.

Grüße aus Würzburg
Julian

[Daniel unreg]

Hallo,

.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; }

Du kannst Farbwerte auch abkürzen: #ccc, #444, #888, etc.
Für 'Button' Effekte gibt es auch die Rahmeneigenschaften groove und ridge.

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>

Wie gesagt, Blockelemente dürfen nicht in Inlineelemente gepackt werden. Wenn du deine Verweise 200 Einheiten breit haben möchtest gib ihnen die Eigenschaften display: block; und width. Bei width würde ich aber zu einer em statt px Angabe raten.

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...

Klar, IE akzeptiert :hover nur bei <a>. IE7 akzeptiert die Angabe (nur im standardkonformen Modus) für alle Elemente.

Kennt jemand eine (reine CSS-) Lösung die auch der IE6 peilt?

<a> mit den genannten Eigenschaften formatieren.

Gruß, Daniel

[Michael S.]

Kennt jemand eine (reine CSS-) Lösung die auch der IE6 peilt?

<a> mit den genannten Eigenschaften formatieren.

Danke für den Tip mit display:block; so ganz zufriedenstellend funktioniert es aber im IE6 auch damit nicht, wenn man width:100% setzt, gibts anscheinend probleme mit der Berechnung "wieviel sind 100%", denn die rechte Border wird jetzt immer noch abgeschnipselt, zumindest in dem Fall das der button in einer <TD> liegt und eben 100% breit sein soll...

Merci
Michael

[Cybaer]

Hi,

<a href="blabla.htm"><div width="200" class="linkbutton>Mein Button</div></a>

Das DIV ist eigentlich überflüssig. Du kannst es weglassen oder ein SPAN nehmen, und dann die display-Eigenschaft auf inline-block setzen. Inline-Blöcke verhalte sich wie Inline-Elemente, man kann ihnen aber eine Breite zuweisen.

Gruß, Cybaer