IE7 passes the sprite test

beegee sprite thumb
I came across an issue with Internet Explorer 7 beta displaying the rating stars incorrectly in Yahoo! Tech. After doing some testing, I realized the browser was measuring the sprite image from the bottom up, rather than the top down. This is a significant issue. I had to create a new set of rules in the IE7 style sheet for the new measurements.

I use sprites extensively. I love the way they save server requests and I think they are much easier to maintain. The thought of fixing all of my sprites was enough to send me downstairs for another coffee. But I noticed the only sprites being affected were the ratings. I needed to find what was special about these. The ratings sprites use a span that is absolutely positioned in either an unordered list or definition list. This gives us flexibility for displaying them across the site.

IE7 Does it Right!

I created a test page for using sprites. I stripped the CSS down to simple list handling, floating, positioning, and sprite. IE7 handled it perfectly. I even replaced the links with spans and that still didn’t trip up IE7. Take a look at the test page , IE7 Sprite Test, to see the results. While I’m still having problems with IE7’s handling of sprites. I believe it is a unique combination of styles that is causing this issue. I don’t think the average person will need to worry about this.

When I do figure out what is going on with Yahoo! Tech’s rating sprites, I’ll update this blog with the solution. For more information on using sprites, visit Dave Shea’s article CSS Sprites: Image Slicing’s Kiss of Death on A List Apart.

Find out what CSS Safari supports and what it doesn’t

There’s a great page on the Mac site that lists exactly which CSS rules are supported by Safari. I’d love to see a grid of all major browsers and what CSS they support. While outdated, this CSS3 support grid is a nice start. Heck, maybe I’ll get off my duff and do one myself. If you know of a browser CSS or JS Support grid, leave a comment for everyone to share

Add a conditional comment with XSL

This is probably one of those posts that I’ll use a million times and everyone else will say… that’s nice. Here’s how you create a conditional comment for IE6 with xsl. you need to use an xsl:comment and a cdata and don’t add any extra spacing.

IE6 only element, such as an image or css file