Recently I was working on a Magento 1.5 project, customising a theme. On the front page the client wanted repeating rows of images to link through to the shop’s categories. I did this using Magento’s “widget” links, and then used css to style background images.

Within the css I used “sprites” to control the rollover state of the image. The css I used to style this effect is below.

a#yarns{background: url(../images/main-clickthroughs-wool.jpg)0px 0px no-repeat; min-height: 126px; width:232px; position: relative;}

a#yarns:hover{background: url(../images/main-clickthroughs-wool.jpg) -232px no-repeat; height: 126px;width:232px;color:#333333; }

While testing using Firefox & Chrome, all was well. Wrapping up I switched to testing IE7 & suddenly I had no category images on the home page! If I hovered I would see the hover image, but not the default background image.

After googling I found the problem – there should be a gap or space between the “)” and the next value, “0” in this instance. So the code should read as follows:

a#yarns{background: url(../images/main-clickthroughs-wool.jpg) 0px 0px no-repeat; min-height: 126px; width:232px; position: relative;}

a#yarns:hover{background: url(../images/main-clickthroughs-wool.jpg) -232px no-repeat; height: 126px;width:232px;color:#333333; }

It seems Firefox & Chrome are more tolerant but Internet Explorer isn’t. So, something to note for future reference!