8

I've set background-image on a couple of span elements, but they aren't showing up, I think because my height and width settings are being ignored.

HTML source:

<div class="textwidget">
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a> 
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a> 
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a>
</div>

CSS:

span.sidebar-poster {
    margin-bottom: 10px;
    background-repeat: no-repeat;
    width: 160px;
}
span#starthere { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#starthere:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#primarydocs { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#primarydocs:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#donate { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
    height: 285px;
} 
span#donate:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}

None of the background images are actually visible.

In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.

[UPDATE - this part is solved, thanks] In Chrome Developer Tools, under Matched Rules, only the #starthere and #donate spans are actually picking up the background-image attribute. The #primarydocs span is not. Why not?

AP257
  • 89,519
  • 86
  • 202
  • 261
  • So the span elements have height 0px and width 0px, maybe that's it. Why? Why don't they have the height that I have given to them in the #id and the width in the sidebar-poster class? – AP257 Jan 17 '11 at 18:10
  • 2
    `span id="#primarydocs"` should probably be `span id="primarydocs"`. –  Jan 17 '11 at 18:11
  • YES. Thank you, don't know how I didn't spot that! Now just have the widths to figure out. – AP257 Jan 17 '11 at 18:13
  • Wider question: how could I have spotted that without posting on SO? Is there an equivalent of Firebug for CSS errors? Firebug was giving the cryptic error "Unexpected token in attribute selector !", but I'm not even sure that was related to this error. – AP257 Jan 17 '11 at 18:16
  • @AP257: firebug lists all the rules that matched the element, so if you don't see a rule you expected to be there, you've usually misspelled the class/id or missed a comma in the selector rule. (At least, that's what I do.) – Ulrich Schwarz Jan 17 '11 at 19:21
  • OFf-topic: you should use a `ul` for the list of links to be semantically correct. – zzzzBov Jan 17 '11 at 19:24

4 Answers4

8

SPAN is an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;

Marnix
  • 6,384
  • 4
  • 43
  • 78
4

I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.

Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48
  • Note that inline-block isn't supported by I think at least IE6, maybe not 7 either. Honestly, I just remember it isn't "well supported", I don't remember the extent of it. – crimson_penguin Jan 17 '11 at 19:21
  • My excuse is that IE6 is so aaaaaancient I just don't give a s, and all platforms that had IE7 also got IE8. Thankfully I work in a nerdy place and might get away with it. ;) – Ulrich Schwarz Jan 17 '11 at 19:23
2

Since a is display: inline; automatically it cannot take width and height attributes from CSS.

If you want to use the inline characteristic but without inner content (ie: <span>content</span>) and instead have a background image, use padding instead.

ie:

span { padding: 10px; }

but input the number of pixels you would need to show the image.

Adrian
  • 21
  • 1
0

Solved it - you can't set height and width on span because it is an inline element. Switching to div solved it.

Phew.

If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!

AP257
  • 89,519
  • 86
  • 202
  • 261
  • 1
    Use Chrome and it's built-in developer tools, they're great! Or if you are a Firefox junkie, use the FireBug add-on. Both of these are fabulous debugging tools. – Baer Jul 25 '11 at 15:16