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