The following URL:

http://geo.trippy.org/

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.

3 answers

danwellman 5600
0
points
This was chosen as the best answer

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:

  1. Validate! The page currently has 255 errors according to the W3C validator. A considerable sum.
  2. 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 src attributes (and they don't have alt attributes 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.

Answered over 7 years ago by danwellman
0
points

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.

Thanks!

Answered over 7 years ago by Mark Breitenbach
  • lol no worries :) I always find it easier to code as correctly as possible from the start, almost eliminating the clean-up phase. There's enough clean-up at the end of the project when making things work in IE! danwellman over 7 years ago
0
points

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!

Answered over 7 years ago by Mark Breitenbach