2

I'm applying an image to a li element in CSS, the image appears next to the li items when I first load but then after a refresh they vanish and are replaced by bullet point. I'm using the preview option coda 2 which uses Safari but in Firefox (latest version) and Chrome (latest) the images don't even load.

My CSS code is really simple and I have no idea why this issue is taking place

ul {
    list-style-image:url("images/star.png");
}  

li {
    margin: 10px 0px 0px 0px;
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
00IIIIIII0I
  • 21
  • 3

1 Answers1

1

Your CSS should be working. Test:

ul {
  list-style-image: url(http://stater.mahdaen.name/icons/favicon-16x16.png);
}
li {
  margin: 10px 0 0 0;
}
<ul class="org">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

If your CSS is not working, then you may check this:

  1. Do not apply custom display to the li (e.g inline-block).
  2. Image is exist.
  3. List style is still not overridden by other css.
Nanang Mahdaen El-Agung
  • 1,404
  • 10
  • 14
  • Hi, the above code doens't work, strangely if i embed the css code into my html document then it works fine but from a seperate css file then issues arise. – 00IIIIIII0I Sep 15 '15 at 23:42
  • Can you show me your directory structure? Probably your css file is not in the same folder of the image, and you need to change `url(images/...);` to match to your directory structure. E.g: `url(../images/...);` – Nanang Mahdaen El-Agung Sep 16 '15 at 14:10