Newbie: Prob. mit Hintergrund Bild bei Links im Firefox

[Markus]

Hallo,

ich habe ein Problem:
Ich habe die Links in meinen Menü mit einer Hintergrundgrafik hinterlegt:
a.menue:link {
   background-image:url(../images/button.jpg);
   width: 340px;
}
Im IE zeigt er so die Menüpunkte, jeweils mit der Hintergrundgrafik "Button" mit einer Breite von 340px an. Alle "Menü"-Buttons sind gleich lang.

Beim Firefox hört die Hintergrundgrafik immer mit dem Ende des Textes auf dem Button auf. In der Beschreibung zu "background-image" habe ich gelesen, dass das sogar die richtige Darstellung ist.

Wie kann ich erreichen, dass die Buttons auch im Firefox alle eine Länge von 340px haben?

Danke,
Markus

[wahsaga]

hi,

a.menue:link {
   background-image:url(../images/button.jpg);
   width: 340px;
}
Im IE zeigt er so die Menüpunkte, jeweils mit der Hintergrundgrafik "Button" mit einer Breite von 340px an. Alle "Menü"-Buttons sind gleich lang.

Klar, der IE macht viel falsch.

Beim Firefox hört die Hintergrundgrafik immer mit dem Ende des Textes auf dem Button auf. In der Beschreibung zu "background-image" habe ich gelesen, dass das sogar die richtige Darstellung ist.

Das hat nichts mit background-image zu tun, sondern damit das width für inline-Elemente keine Wirkung haben darf.

Wie kann ich erreichen, dass die Buttons auch im Firefox alle eine Länge von 340px haben?

Lasse sie nicht inline darstellen - bspw. per display:block, oder float.

gruß,
wahsaga

[Markus]

Hi,
danke für Deine Antwort. So ganz verstanden habe ich sie aber leider nicht, bin halt ein Anfänger.
Ich habe jetzt den Code geändert:
a.menue:link {
  background-image:url(../images/button.jpg);
  width: 340px;
  display:block;
}
Eine Änderung sehe ich aber leider nicht.

Hast Du vielleicht noch eine Idee?

Danke,
Markus

[Markus]

HAb mich vertippt, funktioniert prima! MERCI!

[Gunnar Bittersmann]

Hello out there!

danke für Deine Antwort. So ganz verstanden habe ich sie aber leider nicht

Das 'a'-Element ist per Default keines auf Blockebene [CSS2 §9.2.1], sondern ein nicht-ersetztes Inline-Element [CSS2 §9.2.2].

Deshalb muss die Angabe von 'width' unberücksichtigt bleiben, denn:

„'width' […] Angewendet auf: Alle Elemente, außer auf nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen“ [CSS2 §10.2]

Durch setzen der 'display'-Eigenschaft auf den Wert 'block' wird das 'a'-Element zu einem auf Blockebene und die 'width'-Angabe wird erhört.

See ya up the road,
Gunnar