title: CSS list-style-image not showing
body: <p>I'm trying to get an arrow as list style image. Googling and here on SO I found some things that can go wrong (display: list item, overflow, using background image,  but didn't help. The path is correct.</p>
  
  <pre><code>ul#contactlist {list-style-image:url('images/images/arrow.png'); list-style-type: square; padding: 15px;}
      ul#contactlist li{display: list-item; padding: 10px; overflow: visible; width:100px; margin: 1px;
  </code></pre>
  
  <p>I also tried</p>
  
  <pre><code>ul#contactlist li{background-image:url('images/images/arrow.png'); background-repeat:no-repeat; background-position:0px 0px;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>ul#contactlist li{background: url('images/images/arrow.png') left center no-repeat; list-style-position: inside; vertical-align: middle;}
  </code></pre>
  
  <p>What's weird is that the <code>list-style-type: square;</code> isn't showing either, but when I put <code>display: list-item;</code> on the ul#contactlist, there is 1 square.</p>
  
  <p><code>list-style-position: inside;</code>  or outside, didn't help</p>
  
  <p>This is the HTML.</p>
  
  <pre><code>&lt;ul id="contactlist"&gt;
      &lt;li&gt;lorem&lt;/li&gt;
      &lt;li&gt;ipsum&lt;/li&gt;
      &lt;li&gt;dolor&lt;/li&gt;
      &lt;li&gt;sit amet&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>