ul li backgroundimage

5 svar · 429 visningar · startad av dea 11 maj 2006

deaMedlem sedan dec. 2002387 inlägg

Frågan11 maj 2006 13:29#1

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?

tantenMedlem sedan nov. 20051 596 inlägg

11 maj 2006 13:51#2

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?

deaMedlem sedan dec. 2002387 inlägg

11 maj 2006 18:17#3

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;
}

OkkidoMedlem sedan maj 20007 492 inlägg

11 maj 2006 18:59#4

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

tantenMedlem sedan nov. 20051 596 inlägg

11 maj 2006 19:12#5

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;	
}

deaMedlem sedan dec. 2002387 inlägg

11 maj 2006 19:51#6

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