HTML: span with a background color and image -- why doesn't the color appear under the image?

Question

I'm trying to add an arrow image beside the text within a span. Here's the HTML I'm working with:

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

Now, I've coloured the background of the span with this css:

#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;
}

Now, this displays everything correctly lined up, but the background colour doesn't extend past the end of the word "Unreviewed". The image, despite being a transparent png, is white behind, rather than #DA704B.

This is the case with both Firefox and Safari. Any help would be appreciated!

Answer 1

Spans need to have display: block; in order to work like that.

#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;
}

Answer 2

change:

#status span.unreviewed {

to span.unreviewed {

that works for me in all browsers.

If it still doesn't work, try making it block-level or use a div, as the colouring doesn't quite work as you'd expect on inline elements

Answer 3

Well, What jumps out at me is:

#status span.unreviewed

would be the selector for span with class "unreviewed" that is a descendant of #status. The selector you are looking for is

#status.unreviewed

You might want to have a look at the w3c specifications for CSS2 to avoid selector problems like this. http://www.w3.org/TR/CSS2/selector.html

Hope that helps.

edit: one other quick point, why not use background-color instead of background as all you're doing is changing the background color?

Answer 4

You might also find it worthwhile declaring:

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

that should at least remove the white default image background.