The following URL:
has a whole mess of brilliant buttons on the right that I use for my "links". I spent a fair amount of time converting them all into one image that I then use CSS to "sprite" against (is that a verb?). Anyway. I had it all working and it looked good in all browsers I tried from home (FF and Chrome at least). Then I get to work, and the images do not appear at all. I pull up the full image just fine, it is just the buttons that don't show up. The weirdness is that I'm using FF7.0.1 in both places. If I pull up the image (non-sprited) itself, it shows up in both places just fine. So why would the interpretation of CSS and the subsequent rendering of the page differ from home and work? Yes, work has a proxy server, but I can pull up the image! I just don't get it.
Final note: The buttons show up just fine with Chrome (at work). This just doesn't make any sense.
They do display in my Chrome, but don't display in my Firefox as well.
I suspect that the reason for them not displaying in FF is because they are not valid images (they don't have
src attributes). Chrome is filling in the blanks and displaying them anyway, whereas FF is likely recognising them as invalid and not displaying them.
You can make FF display them by setting them to
display:block, however, I would recommend 2 things instead:
- Validate! The page currently has 255 errors according to the W3C validator. A considerable sum.
- Use the right element for the right job. Technically, you're kind of using the right element - an
<img>is obviously the ideal element to use when you want to display an image - but you're not using the element correctly as they don't have
srcattributes (and they don't have
altattributes either). I can see that you want to use the sprite to save HTTP requests, which is fine, but there's really little point in applying a background-image to an image...
I would recommend removing the
<img> elements entirely, and applying the CSS to the
<a> elements instead.
Ok, I'll give this a shot when I get home from the bar tonight (hmm, ok, maybe tomorrow morning instead) and see how that works. And I agree on your other points. I was decidedly not done yet in the "cleanup" efforts for the page.
display:block was the key to getting them to display. Getting rid of the
<img> part will clean up the validation errors (since most of them are missing "src" and "alt" attributes). Spot on. Thanks!