Is IE7 measuring sprites differently than other browers?

Go Back to www.last-child.com

I noticed an issue with our sprites when first testing IE7 and thought it was a strange bug with positioning. I finally figured out the sprites were being measured from the bottom up, instead of the top down, as most browsers do. It appeared this was happening when the sprite container was positioned absolutely.

In honor of Big John and Holly, the mighty Aussie bug squashers, I've built this test page with the other great Aussie exports: Barry, Maurice, Andy, and Robin.

While my original problem site, Yahoo! Tech is still showing some odd sprite behaviors, I haven't been able to duplicate them in this test. It's going to take some more testing to find the particular combination of styles causing the original problem. So, this failed test is actually a good thing. You won't need to worry about your sprites with IE7 unless you duplicate the same issues I had. Then, try measuring from the bottom up.

Test Suite

Non-positioned links with backgrounds

Non-positioned links in floated list items

Relatively positioned links in non-floated list items

Relatively positioned links in floated list items

Absolutely positioned links in non-floated list items

Absolutely positioned links in floated list items

Absolutely positioned spans in non-floated list items

Absolutely positioned spans in floated list items

The CSS used on this page

* {margin:0; padding:0;}
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:100%; color:#666;}
#wrap {font-size:86%; background:#fff; border-top:none; float:left; padding:0 0 20px 20px;}
h3 {clear:left; padding:10px 0; font-family:Arial, Helvetica, sans-serif;}
ul {margin:10px;}
ul, li {list-style:none;}
li {margin:10px 0;}
h1 {font-size:120%; font-family:Arial, Helvetica, sans-serif;}
h2 {font-size:110%; font-family:Arial, Helvetica, sans-serif;}
p {max-width:550px; margin:10px 0;}
.barry, .maurice, .andy, .robin {display:block; width:100px; height:100px; text-indent:-1000em;}
.andy {background:url(gibb-sprite.jpg) no-repeat 0 0}
.barry {background:url(gibb-sprite.jpg) no-repeat 0 -200px}
.maurice {background:url(gibb-sprite.jpg) no-repeat 0 -400px}
.robin {background:url(gibb-sprite.jpg) no-repeat 0 -600px}
ul.floatedlist li {float:left; width:100px; margin:0 5px;}
ul.positionedlist a {position:relative; top:0; left:100px; }
ul#posandfloat li, ul#posandfloat2 li {width:200px; font-size:90%;}
ul.abpositioned li {width:200px; position:relative; height:100px; border:1px solid #999; }
ul.abpositioned li a, ul.abpositioned li span {width:100px; position:absolute; top:0; left:100px; display:block;}