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.

Recommended Answers

All 3 Replies

Firstly, sqred isn't a property, its a class. Secondly, how else would you use an image without sending a request? (There are ways to do it by base64-encoding the image but it doesn't work in IE). If you're asking how to set the background-position of the list-style-image you can't. You could get around it by setting it to none and then manually putting a background image on each of the li's with a left padding

Thanks for your reply. You are right: I meant to say class instead of property.

Your statement about retrieving an image with a request requires some elaboration. Since the image sprite exists in the browser cache (several sprite icons are used the default page), my concern is to avoid posting an additional request for retrieving an image that already exists.

Basically, I am looking for a css class definition that would extract icon sqred1. Currently, if I use a definition similar to the one below, a different icon will appear next to each li starting from the top of the sprite list (icons are arranged vertically, separated by 25px vertical margins):

.sqred1{background-position:0 -350px;margin-top:5px;margin-bottom:0;padding-top:0px;}

Your statement about retrieving an image with a request requires some elaboration. Since the image sprite exists in the browser cache (several sprite icons are used the default page), my concern is to avoid posting an additional request for retrieving an image that already exists.

I think what you ask is done automatically,
but a request is always made, the browser has to be asked to supply 'something' before it will determine to fill the requested something from local cache or remote host

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.