Tech Note: Entry Rating Listification and Image Replacement
The image replacement technique about which we pontificated at length yesterday has now been applied to the entry rating buttons (not the comment ratings… yet).
If you still haven’t fully recovered from the annual festivities and have no idea what we’re talking about, these are the rating buttons that are at the bottom left of each front page article. They now have slightly darker “rollover” states (pure CSS, no Javascript image swapping), and a third “disabled” state, all combined into one image file.
Because pictures speak louder than words, here’s the background image for the upding button, with all three states visible:
Apart from those differences, they should act the same, Bob willing; it’s been tested in the major Mac and PC browsers.
(IE6 was a pain, but you already knew that. Floating elements really brings the bugs out of the chromework in that browser.)
UPDATE at 1/1/09 6:33:24 pm:
Those of you still plugging along with Internet Explorer 6 may notice that these images look a little funny. The spaces between the icons in the image above, for example, show up with a faint blue background instead of being transparent as intended. This is because IE6’s PNG transparency support is hopelessly broke down and busted. There are methods to work around IE6’s issues, but they don’t play nice with background images.
So consider this tiny cosmetic flaw our meager attempt to encourage the world to move on and leave IE6 on the hard drives of yesteryear.
Frank says: