I want to implement the bullet style for each unordered list.I have the sprite

Question

0

Asked: June 18, 20262026-06-18T21:34:54+00:00 2026-06-18T21:34:54+00:00

I want to implement the bullet style for each unordered list.I have the sprite

0

I want to implement the bullet style for each unordered list.I have the sprite image for that.And I implemented it.I took the example form the below link.

http://www.cssbakery.com/2012/08/css-list-with-icon-sprites.html

It works fine except in IE7.The same tutorial I want to run in IE7 also.How can I achieve it?

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>CSS Sprites for Bullets</title>
<!--[if lt IE 8]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <style>
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; padding:0;
    }

    .bullet li 
    {
            // padding-top: 5px;  
             padding-left: 20px;
             //margin-bottom: 15px;
             //line-height:1.5em;
             //position: relative;
    }
    .magento li:before 
    {
         display: inline-block;
         position: absolute;
         margin: 9px 0 0 -20px;
         min-height: 9px;  
         background: url(images/bulletsprite.png) no-repeat -116px 0px;
         content:"";
        // vertical-align: middle;
         width: 9px; 
         height: 9px;
         float:left;
    }
           </style>
     </head>
<body>
<div>
    <p>Magenta</p>
    <ul class="magento bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>  
       </body>
       </html>