Problem z elementami span Opera Opcje

[czarek1986]

Witam. Tworzę stronę na której będzie między innymi stronicowanie. W operze napotkałem na problem dla mnie nie do pokonania bez czyjes pomocy. Wygląda to mniej więcej tak

(IMG:http://img696.imageshack.us/img696/8626/stronicowanie.jpg)

Początek <span> z liczbą 18 pozostaje w poprzedniej  linii. w innych przeglądarkach do nowej linii jest prsenoszona cała 18-stka razem z tłem.

A tu fragment kodu tej strony i css

[HTML] pobierz, plaintext 
<div id="navigation_bar">
	<span class="selected bar_item"><strong>1</strong></span>
<span class="bar_item"><a href="./?a=all&pg=1">2</a></span>
<span class="bar_item"><a href="./?a=all&pg=2">3</a></span>
<span class="bar_item"><a href="./?a=all&pg=3">4</a></span>
<span class="bar_item"><a href="./?a=allt&pg=4">5</a></span>
<span class="bar_item"><a href="./?a=all&pg=5">6</a></span>
<span class="bar_item"><a href="./?a=all&pg=6">7</a></span>
<span class="bar_item"><a href="./?a=all&pg=7">8</a></span>
<span class="bar_item"><a href="./?a=all&pg=8">9</a></span>
<span class="bar_item"><a href="./?a=all&pg=9">10</a></span>
<span class="bar_item"><a href="./?a=all&pg=10">11</a></span>
<span class="bar_item"><a href="./?a=all&pg=11">12</a></span>
<span class="bar_item"><a href="./?a=all&pg=12">13</a></span>
<span class="bar_item"><a href="./?a=all&pg=13">14</a></span>
<span class="bar_item"><a href="./?a=all&pg=14">15</a></span>
<span class="bar_item"><a href="./?a=all&pg=15">16</a></span>
<span class="bar_item"><a href="./?a=all&pg=16">17</a></span>
<span class="bar_item"><a href="./?a=all&pg=17">18</a></span>
<span class="bar_item"><a href="./?a=all&pg=18">19</a></span>
<span class="bar_item"><a href="./?a=all&pg=19">20</a></span>
<span class="bar_item"><a href="./?a=all&pg=20">21</a></span>
<span class="bar_item"><a href="./?a=all&pg=21">22</a></span>
 
	</div>
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
#navigation_bar {
	text-align : center;
	width : 700px;
	margin : 0 auto;
}
 
#navigation_bar .bar_item {
	padding : 3px 7px;
	margin : 0px 4px;
	text-align : center;
	line-height : 35px;
	background : #263535;
}
 
#navigation_bar .selected {
	background : #5f9489;
	color : #153c3e;
}
 
#navigation_bar a {
	text-decoration : none;
}
[HTML] pobierz, plaintext 

Może ktoś będzie wiedział co można z tym zrobić

Ten post edytował czarek1986 11.12.2009, 13:49:30

[wookieb]

Spróbuj dać dla spana

[CSS] pobierz, plaintext 
display: inline-block;
[CSS] pobierz, plaintext 

albo (ale wtedy elementy zostaną wyrównane do lewej)

[CSS] pobierz, plaintext 
display: block;
float: left;
[CSS] pobierz, plaintext 

[czarek1986]

Już próbowałem z tymi displayami. Przy inline nic się nie zmienia bo elelementy span zachowują się tak samo jak i bez tego atrybutu. W przypadku display : block i float:left jest taki problem ze te numery które są przerzucane do nowej lini nie są wyśrodkowane jeśli jest ich mniej niż powyżej.

[DeXTeD]

1 Te powtarzanie klasy bar_item wygląda tragicznie!
2 Tam span jest zbędny.

Dla #navigation_bar a dajesz:
display inline-block,
margin i co tam chcesz.

Dla ie wymusić musisz za pomocą display inline i tym (czymś) zoom: 1

I Problem z głowy, robiłem tak nie raz i działa - jak nie to znaczy, że coś zepsułeś lub masz nie poprawny kod (W3C)