✔ H3 BG Problem mit Firefox

[Chilled86]

Moin,
ich hab folgendes Problem. Und zwar habe ich per CSS definiert dass neben dem Text ein kleiner Pfeil zu sehen ist.

h3 { 
  clear: both; 
  font-size: 1.1em; 
  color: #000; 
  background: #fff url(../images/h3bg.gif) no-repeat center left; 
  padding: 0 14px; 
  margin: 0;
}

Im Internet Explorer funktioniert das auch einwandfrei. Wenn ich jetzt jedoch im <h3> Tag einen oder gar mehrere Links einfüge, zeigt er mir im Hintergrund jedes Links auch so nen Pfeil an. Hab absolut keine Idee woran das liegen könnte.

<h3><a href="?view=detail&action=view&cid=1" target="_top">[<< Vorheriger Termin]</a>&nbsp;<a href="?view=detail&action=view&cid=6" target="_top">[N&auml;chster Termin >>]</a></h3>

Hat jemand ne Idee woran das liegt? Bin für jede noch so kleine Hilfe dankbar.

Greetz Chilled

 

[Maik]

Hi,

das von dir geschilderte Problem der Hintergrundbild-Wiederholung kann ich bei mir im FF 2.0.0.4 (Win2000) nicht feststellen, und ebenso wenig reproduzieren.

Gibt es evtl. eine Online-Version der Seite, um dort mal einen Blick drauf werfen zu können?

 

[Chilled86]

Nein leider nicht, das Teil läft bei mir in der Firma auf nem Internen Apache. Hab mal zwei Bilder zur veranschaulichung im Anhang beigefügt.

 

[Maik]

Anhand deiner Quellcode-Angaben sieht's bei mir so aus - das Hintergrundbild ist der schwarze Pfeil.

Im IE sieht's genauso aus, und das, obwohl ich noch zwei weitere Links hinzugefügt habe.

Vielleicht solltest du mal den kompletten HTML- und CSS-Code zeigen - möglicherweise liegt's ja an einer anderen Einstellung.

 

[Chilled86]

Musste es Anhängen (max. Textlänge überschritten...) Sorry wenn ich noch einige Fehler drin hab, aber ich lerne gerade erst CSS

 

[Maik]

Okay, der Grund ist der background-Wert inherit für die Links, womit sie den Hintergrund des übergeordneten Elements übernehmen:

a {
  color: #546F92;
  background: inherit;
}

a:hover {
  color: #808080;
  background: inherit;
}

Siehe auch http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap06.html#heading-6.2.1%A0

 

[Chilled86]

Danke vielmals für deine Hilfe, funktioniert jetzt!