title: HTML: span with a background color and image -- why doesn't the color appear under the image?
body: <p>I'm trying to add an arrow image beside the text within a span. Here's the HTML I'm working with:</p>
  
  <pre><code>&lt;span id="status" class='unreviewed'&gt;
    Unreviewed 
    &lt;img src="bullet_arrow_down.png" /&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Now, I've coloured the background of the span with this css:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>This is the case with both Firefox and Safari. Any help would be appreciated!</p>