HTML: Spannen mit einer Hintergrundfarbe und einem Bild – warum wird die Farbe nicht unter dem Bild angezeigt?

Ich versuche, ein Pfeilbild neben dem Text innerhalb einer Spanne hinzuzufügen. Hier ist der HTML-Code, mit dem ich arbeite:

<span id="status" class='unreviewed'>
  Unreviewed 
  <img src="bullet_arrow_down.png" />
</span>

Jetzt habe ich den Hintergrund der Spanne mit diesem css eingefärbt:

#status {
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

#status span.unreviewed {
  padding: 3px 4px; 
  background:#DA704B none repeat scroll 0 0;
}

#status span.unreviewed img {
  float: right;
}

Jetzt wird alles korrekt aufgereiht angezeigt, aber die Hintergrundfarbe reicht nicht über das Ende des Wortes "Unreviewed". Das Bild ist, obwohl es ein transparentes Png ist, hinten weiß und nicht #DA704B.

Dies ist der Fall bei Firefox und Safari. Jede Hilfe würde geschätzt werden!

Antwort auf "HTML: Spannen mit einer Hintergrundfarbe und einem Bild – warum wird die Farbe nicht unter dem Bild angezeigt? " 4 von antworten

Spans müssen Anzeige haben: Block; um so zu arbeiten.

#status {
  display: block;
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

Änderung:

#status span.unreviewed {

zu span.unreviewed -27-", das für mich in allen Browsern funktioniert.

Wenn es immer noch nicht funktioniert, versuchen Sie es auf Block-Ebene zu machen oder verwenden Sie ein div, da die Färbung nicht ganz funktioniert, wie Sie es bei Inline-Elementen

erwarten würden.

Nun, was mir aufspringt, ist:

#status span.unreviewed 

wäre der Selektor für Span mit Klasse "unreviewed", die ein Nachkommen von #status ist. Die Selektor, die Sie suchen, ist

#status.unreviewed

Sie möchten vielleicht einen Blick auf die w3c Spezifikationen für CSS2 haben, um Selektorenprobleme wie diese zu vermeiden. http://www.w3.org/TR/CSS2/selector.html

Hoffnung, die hilft.

bearbeiten: ein weiterer schneller Punkt, warum nicht background-color instead of anstelle von background as all you're doing is changing the background color? verwenden, da alles, was Sie tun, ist die Hintergrundfarbe zu ändern?

Sie könnten es auch lohnenswert finden, zu deklarieren:

#status span.unreviewed img {
background-color: transparent;
}

, das zumindest den weißen Standardbildhintergrund entfernen sollte.