Friday, September 26, 2008

Roundup of best ways to do common things in CSS

CSS Rollover images
Changing a background image on hover causes the browser to load it when its rolled over, which results in a long pause and a blank space where your buttons meant to be.
The simplest way to avoid this is this Pixy method - putting your button state images in the one image and moving that back and forth on hover states. Dont know what they mean by a flicker in IE, its seems fine in IE7.
http://wellstyled.com/css-nopreload-rollovers.html
A more complex method is here
http://www.alistapart.com/articles/sprites/