Firefox stellt bgimage des Buttons nicht dar

[svg-Bastler]

Ich habe per css alle Links als Buttons, mit einem backgroundimage und einem hover-Image definiert.

a {
display:block;
color:#000;
background-color:#fff;
width:200px;
padding:7px;
font-size:14px;
font-family:Verdana, Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:left;
margin:10px;
border:2px solid #000;
background-image:url(csspics\button.gif);
}
a:hover {
display:block;
color:#fff;
background-color:#009933;
background-image:url(csspics\button_on.gif);
text-align:right;
}

Die Bilder werden allerdings vom Firefox nicht angezeigt.
Woran liegt das?

 

[prm]

Spendiere dem a mal noch einen height-Wert entsprechend der Grafik:
Hintergrundgrafik wird nicht angezeigt

 

[svg-Bastler]

Wenn ich die Höhe der Bilder angebe, werden die Buttons viel höher als die Bilder sind!? Ich habe auch mal die bgcolor weggelassen, die ja im Widerpruch zum bgimage steht. Nach wie vor fuktioniert es nur im IE, den ich eigentlich nur zum testen verwende.

 

[neuroleptika]

Das padding reicht auch.
Zeige mal einen link zur Seite.
Im css-Schnipsel kann ich kein Fehler sehen.

 

[svg-Bastler]

Die Seite besteht leider nicht im Internet, das Projekt ist schon etwas älter.
Ich bin gerade an etwas Neuem und möchte wieder auf diese Technik zurückgreifen, habe mich aber daran erinnert, dass es damals nicht geklappt hat!

Moment ich suche mal ein Beispiel raus...

 

[svg-Bastler]

Hier mal die grundlegende Konstruktion.

 

[neuroleptika]

Wegen eines background-image lade ich kein zip-Archiv runter.
Ich weiß ja nicht mal was sie enthält.

Es wird wohl an den Pfadangaben liegen.
Ändere die Pfadangaben in webtaugliche Schreibweise:
csspics/button.gif

 

[svg-Bastler]

Die zip enthält: 2 png-Grafiken, eine htm und eine css-datei.
Ich habe das nur hochgeladen, da ihr nach der Webadresse gefragt habt, die Seite aber gar nicht im Internet steht.

Vielen Dank für eure Mühe, ich denke ich habe den Fehler behoben.
Jetzt muss ich nur noch herausfinden wie!

 

[svg-Bastler]

Noch eine Frage: Wenn ich eine Höhe angebe, wird diese Angabe auf das "padding" auf addiert. Also ist der Button am Ende höher als die Pixelangabe! Wie vermeide ich das? bzw.: wenn ich das padding weglasse klebt der Text direkt am Rand, allerdings stimmt dann die Höhe

 

[neuroleptika]

Dann mußt height anpassen.

(nur für den IE5 und 5.5 win nicht)

Wenn das Element Text enthält, muß die Grafik so groß sein, daß sie auch bei unterschiedlichen Schriftgrößen noch passt.

 

[Efchen]

Ich habe auch mal die bgcolor weggelassen, die ja im Widerpruch zum bgimage steht.

Nein, tut sie nicht. Nur wenn das background-image nicht gekachelt wird, kommt die background-color darunter zum Vorschein. Aber widersprechen tun sie sich nicht.

Noch eine Frage: Wenn ich eine Höhe angebe, wird diese Angabe auf das "padding" auf addiert. Also ist der Button am Ende höher als die Pixelangabe! Wie vermeide ich das?

Das ist das normale Verhalten des "Box Model", wieso würdest Du das ändern wollen?

Die Größe eines Elements ergibt sich immer aus der Summe von margin + border + padding + width/height, und margin/border/padding jeweils auf zwei Seiten.
Berücksichtige das, wenn Du die Größe von Elementen definierst.