6

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!

4 Answers 4

15

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;
}
1
  • 4
    Honestly you should probably just switch the <span> to a <div> that way you conform to the spec properly and your code will inherently work. May 18, 2009 at 15:48
2

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?

0

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

0

You might also find it worthwhile declaring:

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

that should at least remove the white default image background.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.