CODEWITHSUNDEEP
css
Bhushan Firake
Bhushan Firake

Reputation: 9458

Insert image instead of bullets in unordered list

I have the following code:

     <div class="extra-details">
                               <ul class="browse-product-usp">

                               <li>
                                <span class="text">
                                    Dimension: 11x11 inch
                                </span>
                              </li>

                            <li>
                                <span class="text">
                                    Paper Depth: 285 gsm
                                </span>
                            </li>

                    </ul>
            </div>

This look in the browser as below:

enter image description here

My CSS is as below:

    .text {
              color:#333;
              font-family: Helvetica, Arial, sans-serif;

  }

when I put following code:

    ul{list-style-image:url(../img/arrow.png);}

It distorts my text from the iimage line.Please help enter image description here

I want the arrows and the text in the same line.

Upvotes: 0

Views: 2264

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to background-image in your li tag

ul li {
background:url("http://cdn1.iconfinder.com/data/icons/silk2/resultset_next.png") no-repeat 0 3px;
line-height:25px;   
padding-left:25px;
}

Demo

Upvotes: -1

obl
obl

Reputation: 76

You can use background: url("image.gif") no-repeat scroll 0px 5px transparent; instead of list-style-image

Upvotes: 0

arunes
arunes

Reputation: 3524

Try this;

ul {
    list-style-image:url('image.gif');
}

Upvotes: 5

Related Questions