List style image not working in IE 9 :-(

**Zygoma** · Dec 13, 2012 08:26

Buon Giorno from zero degrees c thick fog wetherby UK :-)

On this site http://tutorial.davidclick.com/philpotts-clone.html & illustrated here http://i216.photobucket.com/albums/c...pow-symbol.jpg the pow graphic symbol in the footer only appears in Firefox v 17 but not IE 9.

Please could someone offer a fix with a bit of theory please.

Grazie tanto,
David

**logic_earth** · Dec 13, 2012 13:27

You must be viewing the page under IE7 mode. Open the developer tools in IE9 (press F12) on the menu bar you have "Browser mode" and "Document mode". The images display fine in IE9, they do not display in IE7 or quirks mode.

**Zygoma** · Dec 14, 2012 07:38

Originally Posted by logic_earth

You must be viewing the page under IE7 mode. Open the developer tools in IE9 (press F12) on the menu bar you have "Browser mode" and "Document mode". The images display fine in IE9, they do not display in IE7 or quirks mode.

Thank you so much I had no idea about this.

**ronpat** · Dec 13, 2012 13:33

I don't have IE9 available at the moment, but there are a couple of peculiarities you might want to check.

Code:

 #orange-footer ul
 {
 background-color:#FFA500;
 width:100%;    /* inappropriate */
 padding:0;    /* you need the default padding-left */
 margin:0;
 overflow:hidden;
 list-style-image: url(pow-30.jpg);
 }
 
  #orange-footer li
  {
  margin-left:20px;    /* your choice */
  float:left;
  min-width:8em;
  }

**chris.upjohn** · Dec 13, 2012 16:29

Works fine for me in both IE10 and IE9

**ralph.m** · Dec 13, 2012 16:55

Doesn't work so well in Chrome. As ronpat said, rather than have 20px left margin, you should be using left padding of at least 30 px to fit the background image inside the LIs but without it underlapping the text.