Pageing med li, align strul

Hej,

Jag håller på med en form av paging, som ska visas såhär:

< 1/3 >

Pilarna är bilder i det här fallet, och den li som är i mitten, där det står x/y, har en bakgrundsbild.

Hur som helst, jag får inte till align på dessa tre li.
Såhär har jag gjort:

<ul>
<li class="browse"><a href="#"><img src="images/button/paging.prev.gif" alt="button: previous" /></a></li>
<li class="page_x_of_y">1/3</li>
<li class="browse"><a href="#"><img src="images/button/paging.next.gif" alt="button: next" /></a></li>
</ul>

Min CSS:

ul {
	margin:				15px 0px 0px 0px;
	list-style-type:		none;
	text-align:			right;
	border:				0px #ff0000 dashed;
}

ul li {
	display:			inline;
	height:				11px;
	border:				0px #000 solid;
}

ul li.page_x_of_y {
	width:				22px;
	padding:			0px 5px 1px 4px;
	font-family:			arial, helvetica, sans-serif;
	font-size:			9px;
	color:				#fff;
	text-align:			center;
	background-image:		url(../images/button/paging.xofy.gif);
	background-repeat:		no-repeat;
}

Se min bifogade bild, så ser ni resultatet.

Hur ska jag lösa det här? Någon som kanske har en bättre lösning på mitt problem?

Tack!

Höjden på varje <li> blir inte samma verkar det som.
Jag tror inte det går att sätta height på inline-element.
Om du vill ha samma höjd får du använda inline-block eller float.

Troxy skrev:

Höjden på varje <li> blir inte samma verkar det som.

Precis

Troxy skrev:

Om du vill ha samma höjd får du använda inline-block eller float.

Float funkar inte, inline-block funkar inte, fler förslag?

Hmm..
Testa att lägga till

ul li {
	vertical-align: middle;
}

så blir det lite skillnad ;)

... du får kanske i värsta fall meka lite med bakgrundsbildens positionering i .page_x_of_y efter det - den delen har jag inte testat så noga eftersom jag inte har din bild frilagd att testa med - men det löser sig säkert :)

Jo, det funkar sådär.
Blev rätt i firefox direkt, i IE7 blev det lite snett, men det får lösas i den egna IE7 css'en senare.

Hur det ser ut i IE6 vågar jag inte tänka på just nu, får bli ett senare problem.

Tack ska du ha!