Sliding Doors Problem - Button-Formatierung

[Puccini]

Sliding Doors Problem - Button-Formatierung [gelöst]

Hi,

hab ein kleines Problem mit meinen Buttons...

Schaut euch das hier mal an und geht mit der Maus über den Link:
CSS Test

Wenn ihr drüber geht, seht ihr rechts den button-abschluss, wenn ihr den link wieder verlasst, seht ihr ihn nicht...

Woran liegt das?
Ich habe das ganze css mit in die htm gepackt, schaut euch einfach den Code an.

Hoffe ihr findet den fehler. kann ja nur an was kleinem liegen denk ich, aber css verzeiht einem keine Fehler

Danke für eure Hilfe

 

[Die Zahl]

Formatiere dein CSS bzw die Datei nochmal. Es gibt 2 Zeilen in dehnen seltsame Zeichen drinne sind (Zeile 18 und Zeile 23 steht vor den CSS Befehlen:

Zeile 18:             Â Â Â Â     background: url(./gfx/buttonbackground_right.GIF) no-repeat scroll top right !important;
Zeile 23:
            Â Â Â Â     height: 25px;

)
Mfg

 

[Puccini]

Danke, ist berichtigt!

Aber das Problem besteht weiterhin.:cry:

 

[Voodoo]

Also, ich hab keine Ahnung wieso, scheint ein Bug zu sein, aber wenn ich mit Firebug das Leerzeichen vor dem letzten Tab in Zeile 18 entferne, funktionierts.

Gruß
Voodoo

 

[Puccini]

LOL
dann gehts echt, aber auch nur fast!

Es wird zwar dann der Hintergrund angezeigt, aber beim Hover ändert sich dieser nicht in die Animation -.-

danke schonmal für den Tip!


###### EDIT ######

ES GEHT!
Ich hatte noch das !important bei dem background vergessen wegzumachen!
Jetzt setzt er auch das BackgroundImage beim Hover!

Danke nochmals

 

[Puccini]

Geht doch nicht

Schaut euch das an:
CSS Test

Der Link geht jetz, aber der Button wird total verwurstelt dargestellt...
woran liegt das?
hab doch schon alles versucht...

bin für jede hilfe dankbar

 

[Voodoo]

Liegt an den Default-CSS-Werten von dem Button-Element. Folgender Schnipsel ist eigentlich erster Schritt in jedem Design

* {
 border:none;
 outline:none;
 padding:0;
 margin:0;
 text-decoration:none;
}

 

[Puccini]

ist eingefügt, hilft aber nix.

 

[FoXMorayn]

ich weiß zwar nicht woher der abstand kommt, aber man kann ihn einfach ignorieren:

button, button:hover {
    background-position: 89px;
}

 

[Puccini]

das setzt doch vorraus, das die buttons immer alle gleich breit sind?
Sind sie aber nicht!

 

[FoXMorayn]

das setzt doch vorraus, das die buttons immer alle gleich breit sind?
Sind sie aber nicht!

richtig.
versuchs mal mit % als wert. vllt findet sich was passendes.

 

[Puccini]

ich kann ja leider nicht schreiben:

background-position:100%-25px;

:>
das wäre schön....

 

[neuroleptika]

Setze mal beide sliding doors Elemente innerhalb von button.
Z.B:

<b><span>Testbutton</span><b>

<b> bekommt die Grafik die du bis jetzt für <button> gesetzt hast.
display: block für b nicht vergessen.

 

[FoXMorayn]

für a span funktioniert es? was möchtest du mit dem button machen, eine navigation? dann ist die variante mit a span genau richtig und button absolut sinnlos. man geht nicht von der optik, sondern vom sinn her aus. auch wenn es für dich wie ein button aussieht, ist es einfach nur ein link mit irgend einem optischen effekt.
wenn du javascript steuern möchtest wäre ein button genau richtig.

 

[Puccini]

Das mit b geht (kommisch das es net auch so geht -.-)

Naja.

Und:
klar weis ich das man eine Nav mit Links macht!
Aber Buttons brauch ich zb für Formen zum submitten ;) dafür ist das gedacht.