Blueprint CSS, SilkSprite & IE

We’ve been using the very good Blueprint CSS framework for a while. It provides a nice grid css structure, some default css styles and a nice typography system. It also supports plugins so that you can extend the framework without modifying its internals, which is a sign of a mature framework IMHO.

One of the plugins that we use is a CSS Sprite plugin for the popular (and free) Silk icon set. It’s called, not surprisingly, SilkSprite and it’s very easy to use. We replaced our custom icons and rolled it out in under an hour.

Unfortunately, one of the issues we ran into was sprite rendering in IE. Turns out that you need to add:

.ss_sprite {display: inline-block;}

to Blueprints ie.css style sheet to get the sprites to show up correctly in IE. Hope this helps other people out there.