---
title: "ul li backgroundimage"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/146720-ul-li-backgroundimage"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "dea"
published: "2006-05-11T13:29:55.000Z"
updated: "2006-05-11T19:51:53.000Z"
replies: 5
views: 432
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/146720-ul-li-backgroundimage"
---

# ul li backgroundimage

## #1 — dea, 2006-05-11T13:29Z

Nu har jag stött på ett konstigt problem.

jag har en lista  där jag sätter list-style: none; för att sedan använda mig av background-image istället, annars plaserar sig min pil inte i samma vertikala höjd som min text!

```
#navlist {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	display: block;
}

#navlist li {
	padding-left: 20px;
	background-image: url(images/bullet_go.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

	 <ul id="navlist">
				<li><a href="#">Ipsum</a></li>
				<li><a href="#">Commodo</a></li>
				<li><a href="#">Velit</a></li>
				<li><a href="#">Ondimentum</a></li>
				<li><a href="#">Mollis</a></li>
			</ul>
```

nu använder jag en .png men det ska ändras.

Nu till problemet..
I Explorer så visar sidan bara 4 av 5 pilar ( ibland )
för om man updaterar sidan så försvinner alla pilar..
byter man fönster och går tillbaka så syns 4 av 5 pilar igen

Vad är det som händer?

Bilagor:

- [ie.jpg](https://www.webforum.nu/a/10707.jpg)
- [ie_update.jpg](https://www.webforum.nu/a/10708.jpg)

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

## #2 — tanten, 2006-05-11T13:51Z

Jag tycker din kod borde fungera perfekt... så finns det något annat i din kod som lägger sig över den här i IE? Vad har du bredvid?

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

## #3 — dea, 2006-05-11T18:17Z

Så här ligger det i html och css

```
<div id="footer">
		<div id="footertext">
			 <ul id="navlist">
				<li><a href="#">Ipsum</a></li>
				<li><a href="#">Commodo</a></li>
				<li><a href="#">Velit</a></li>
				<li><a href="#">Ondimentum</a></li>
				<li><a href="#">Mollis</a></li>
			</ul>
		</div>
	</div>
```

```
#footer {
	position: relative;
	margin-top: 10px;
	padding:10px 0 10px 0;
	font-size: 0.8em;
	background-color:#2A65AC;
	background-image: url(images/background_down.jpg);
	background-position: 0 0;
	background-repeat: repeat-x;
	width:100%;
	height: 30%;
	min-height: 30%;
	clear: both;
	}
	
#footertext {
	position: relative;
	width: 770px;
	margin: 0 auto;
	text-align: left;
	color:#576F93;
}

#footertext a{
	color:#fff;
	text-decoration: underline;
}

#footertext ul {
	display: block;
}

#navlist {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	display: block;
}

#navlist li {
	padding-left: 20px;
	background-image: url(images/bullet_go.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}
```

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

## #4 — Okkido, 2006-05-11T18:59Z

Testa bara att byta från png till en gif eller jpg för att se om det är problemet.

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

## #5 — tanten, 2006-05-11T19:12Z

Jag testade med en egen bakgrundsbild i stället för din pil så paddingen stämmer förmodligen inte. Men fungerar det bättre så här? Hos mig gör det det, men bilderna försvann helt i IE för mig från början och visade sig inte som du beskrev...

```
#footer {
	position: relative;
	margin-top: 10px;
	padding:10px 0 10px 0;
	font-size: 0.8em;
	background-color:#2A65AC;
	background-image: url(images/background_down.jpg);
	background-position: 0 0;
	background-repeat: repeat-x;
	width:100%;
        float: left;
	}
#footertext {
	width: 770px;
	margin: 0 auto;
}
#footertext a{
	color:#fff;
	text-decoration: underline;
}
#footertext ul {
	display: block;
}
#navlist {
	margin-left: 0;
	padding-left: 20px;
	list-style: none;
}
#navlist li {
	padding-left: 20px;
	background: transparent url(images/bullet_go.png) no-repeat left;
       	color:#576F93;	
}
```

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

## #6 — dea, 2006-05-11T19:51Z

Det funkade riktigt bra det, tackar och bockar tanten.
Nu ska jag bara ta mig till ändringarna och förstå varför det funkade!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/146720-ul-li-backgroundimage