Lite problem med css och länkar i listor

Tråden skapades 2007-02-09 och har fått 1 svar. Det senaste inlägget skrevs 2007-02-09.

1

Skriv svar

2007-02-09 16:15

#1

pertoyra
Medlem ●
Falun
2007-02-09 16:15

Råkar ha ett par problem med lite CSS-kod som följer:

Jag har en oordnadlista <ul> med ett antal taggar som ska listas i en rad:

<ul>
	<li class="middle"><a href="#" title="">test</a></li>
	<li class="middle"><a href="#" title="">entry</a></li>
	<li class="middle"><a href="#" title="">first</a></li>
	<li class="second-last"><a href="#" title="">några</a></li>
	<li class="last"><a href="#" title="">tags</a></li>
</ul>

För att denna ska listas som jag vill har jag CSSen:

li {display:inline;}
li.middle:after {content:"\002C\0020";} /* kommatecken + space */
li.last:before {content:"\0020\0061\006E\0064\0020";} */ space + and + space */

Detta för att slippa baka in kommatecken i listan. Det fungerar superduper bra så länge jag inte har någon omslutande <a>-tag kring taggen (bild 1). Så fort jag lägger till en länk kring taggen så får jag plötsligt ett utrymme framför kommatecknet som inte direkt är önskvärt (bild 2).

Det ligger inte någon margin på något element överhuvudtaget (kör YUI CSS Reset) och har även provat att lägga in margin:0 !important; på alla tänkbara ställen som kan påverka.

Någon som har några tips på vad som kan vara fel? Se bifogad bild om min beskrivning var usel.

EDIT: Kanske ska nämna att felet uppkommer i både Safari och FF2.

(Och ja, jag är fullt medveten om att detta inte stödjs i vissa webbläsare...)

Anmäl Ändra Gilla Svara

2007-02-09 16:40

#3

pertoyra
Medlem ●
Falun
2007-02-09 16:40

Fasiken vad trött jag blir!

XSL-parsen spottar ur sig koden som sådan:

<ul>
	<li class="middle">
		<a href="#" title="">test</a>
	</li>
	<li class="middle">
		<a href="#" title="">entry</a>
	</li>
	<li class="middle">
		<a href="#" title="">first</a>
	</li>
	...
	<li class="second-last">
		<a href="#" title="">några</a>
	</li>
	<li class="last">
		<a href="#" title="">tags</a>
	</li>
</ul>

När man dock gör om i intenderingen lite:

<ul>
	<li class="middle"><a href="#" title="">test</a></li>
	<li class="middle"><a href="#" title="">entry</a></li>
	<li class="middle"><a href="#" title="">first</a></li>
	<li class="middle"><a href="#" title="">lorem</a></li>
	<li class="middle"><a href="#" title="">ipsum</a></li>
	<li class="middle"><a href="#" title="">dolor</a></li>
	<li class="middle"><a href="#" title="">phasellus</a></li>
	<li class="second-last"><a href="#" title="">några</a></li>
	<li class="last"><a href="#" title="">tags</a></li>
</ul>

... så fungerar det alldelles utmärkt! Då var ju problemet löst, på sätt och vis...

Tack för hjälpen!