# Css list

**URL:** <https://forum.kirupa.com/t/css-list/259840>\
**Category:** Uncategorized\
**Created:** [May 9, 2008, 7:31am UTC](https://forum.kirupa.com/t/css-list/259840 "2008-05-09T07:31:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sidhu](https://avatars.discourse-cdn.com/v4/letter/s/9fc348/32.png) [@sidhu](https://forum.kirupa.com/u/sidhu)\
**Post date:** [May 9, 2008, 7:31am UTC](https://forum.kirupa.com/t/css-list/259840/1 "2008-05-09T07:31:00Z")

</div>

Hi tried css list with one bullet image. it is ok when it has one line  
if a pur 2 or 3 line in one list image position come not properly

i attached files also

Thnaks all

siddesigner

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 9, 2008, 2:03pm UTC](https://forum.kirupa.com/t/css-list/259840/2 "2008-05-09T14:03:42Z")

</div>

IE doesn’t like bullets, I know that for a fact…

If you are very familiar with CSS, I do this instead:

1. Make a jpg image of your bullet (or .gif with transparency if the need requires it)

2. Remove all list styling from your unordered list:

```auto

<ul id="my_list">
<li>Some item</li>
<li>Some item</li>
</ul>

```

```auto

#my_list {
list-style:none;
padding:0;
margin:0;
}

```

1. Apply about 10 pixels of left padding to your **list-items** (This creates a gap to insert the image you created)

```auto

#my_list {
list-style:none;
padding:0;
margin:0;
}

#my_list li {
[COLOR=Red] **padding: 0 0 0 10px;** [/COLOR]
margin:0;
}

```

1. Apply a background image to the\*\* list-item\*\*

```auto

#my_list li {
padding: 0 0 0 10px;
margin: 0;
[COLOR=Red][COLOR=Red]**background:url(images/my_bullet.jpg) no-repeat center left;**[/COLOR][/COLOR]
}

```

1. Tweak\*\* list-item\*\* padding and jpg image accordingly to perfect it

---

<div class="post-metadata">

**Author:** ![thats\_all\_folks](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@thats\_all\_folks](https://forum.kirupa.com/u/thats_all_folks)\
**Post date:** [May 9, 2008, 2:08pm UTC](https://forum.kirupa.com/t/css-list/259840/3 "2008-05-09T14:08:33Z")

</div>

Faster really nice explanation!!

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 9, 2008, 2:21pm UTC](https://forum.kirupa.com/t/css-list/259840/4 "2008-05-09T14:21:03Z")

</div>

😉