I'm having difficulties using sprites in ul lists. The sprite is declared as follows:
CSS:
.sqred, .arrow_whr, .arrow_whl,.img_datetime,.img_folder,.img_cmt
{background:url(img/icons.gif) no-repeat;padding:0 0 0 19px;font-size:x-small;z-index:10;}
.img_datetime{background-position:0 -300px;margin-top:5px;margin-bottom:0;padding-top:0px;}
Using sprites in span or div tags works fine eg.: <span class="img_datetime">some text</span>
Question: How should I define the sqred property for ul lists? Currently, I solved the problem by generating an extra http request, an approach I'd like to avoid.
css: ul.sqred1{list-style-image: url('img/bulred.gif');margin:0 30px;padding: 0 5px;}
html:
<ul class="sqred1">
<li><p>Header 1</p></li>
<li><p>Header 2</p></li>
<li><p>Header 3</p></li>
</ul>
Thanks for any hints.