Internet Explorer 7 (IE7) transparency background image not displaying/hidden fix

I ran into an issue recently where I had displayed background images as bullet replacements for my list.

By using a piece of CSS code such as:

ul#list li { background: transparent url(/img/bullet.png) no-repeat; list-style-type:none }

This allowed me to put in my own custom bullet image. Although this worked well on all browsers (disregarding IE6), the image failed to display on IE7.

To resolve this, in the background declaration, I had to replace ‘transparent’ with an actual background image colour.

Therefore rewriting the declaration to:

ul#list li { background: #fff url(/img/bullet.png) no-repeat; list-style-type:none }

This worked for me. Although this may not be ideal if you have a gradient background behind your bullet styles, but it works.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.