Geek Answers Handbook

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

I am trying to add an arrow image next to text within a range. Here is the HTML I'm working with:

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

Now I have colored the span background using 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 it displays everything correctly aligned, but the background color does not extend beyond the end of the word "Not visible." The image, despite the fact that it is transparent png, is white behind, not # DA704B.

This applies to both Firefox and Safari. Any help would be appreciated!

+6
html css image
source share
4 answers

Spills should have a display: block; 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; }
+15
source share

Well, what will jump out on me:

 #status span.unreviewed

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

 #status.unreviewed

You might want to check out the w3c specifications for CSS2 to avoid selector issues like this. http://www.w3.org/TR/CSS2/selector.html

Hope this helps.

edit: another quick point, why not use background-color instead of background , since all you do is change the background color?

+2
source share

change:

 #status span.unreviewed {

at span.unreviewed {

which works for me in all browsers.

If it still doesn’t work, try to make it blocky or use a div, as the coloring doesn’t quite work as you would expect from inline elements

0
source share

You might also find it advisable to declare:

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

which should at least remove the white background of the default image.

0
source share

More articles:


All Articles