List style image not working in IE 9 :-(

Buon Giorno from zero degrees c thick fog wetherby UK :slight_smile:

On this site http://tutorial.davidclick.com/philpotts-clone.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/missing-ie-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

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.

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


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

Works fine for me in both IE10 and IE9

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.

Thank you so much I had no idea about this.

Added a list-style-position:inside; that seamed to fix images disappearing :slight_smile:

Thanks for posting your fix.