---
title: "Egen icon till <li>"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/124457-egen-icon-till-li"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Emil RT"
published: "2005-03-16T10:15:10.000Z"
updated: "2005-03-16T22:20:39.000Z"
replies: 5
views: 350
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/124457-egen-icon-till-li"
---

# Egen icon till <li>

## #1 — Emil RT, 2005-03-16T10:15Z

Har denna koden i mitt Style Sheet:

```
ul
{
    list-style-type:circle; 
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li
{
	list-style-image:url('/aaa_media/search/icon_01.gif');
	padding:0px 0px 0px 0px;
}
```

Saken är den att i IE kommer den lite högt i t-led gentemot textraden och i NS kommer den något lite under.

Exicterar lösning?

/E

Permalänk: https://www.webforum.nu/p/124457

## #2 — dectgap, 2005-03-16T10:28Z

Jag var på väg att slå upp ordet "exicterar" innan jag insåg att det var "existerar" du avsåg :)

Hur som helst...
Det hela görs ganska enkelt genom att använda bilden som bakgrund istället:

```
ul {
    list-style-type: none;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 15px;
}
li {
	background: url('/aaa_media/search/icon_01.gif') left center no-repeat;
	padding-left: 10px;
}
```

Att jag sätter *padding-left* till 10px beror på att vi vill att bakgrundsbilden ska synas utan någon text eller annat innehåll över.
Ändra 10px till vad som är lämpligt för dig.

Permalänk: https://www.webforum.nu/p/1573460

## #3 — GunnarD, 2005-03-16T13:19Z

Lite tips om hur man kan modifiera listor: <http://css.maxdesign.com.au/>

Permalänk: https://www.webforum.nu/p/1573545

## #4 — Emil RT, 2005-03-16T16:58Z

Toppensida!

Permalänk: https://www.webforum.nu/p/1573640

## #5 — simmel, 2005-03-16T21:22Z

enda problemet är att hela den \<li\> får det, så om man inte vill ha indenting på andra raden så blir det problem.

Permalänk: https://www.webforum.nu/p/1573742

## #6 — dectgap, 2005-03-16T22:20Z

> **simmel skrev:**
>
> enda problemet är att hela den \<li\> får det, så om man inte vill ha indenting på andra raden så blir det problem.

Då kan du testa med

```
li {
	background: url('img1.png') 0 5px no-repeat;
	text-indent: 25px;
}
```

Jag skrev "0 5px" (horisontell resp. vertikal placering) för att få bilden justerad efter första raden istället hela li-elementet.
Det kan naturligtvis också ändras efter behag.

Permalänk: https://www.webforum.nu/p/1573773

---

Tråden på webben: https://www.webforum.nu/amne/html-css/124457-egen-icon-till-li