✔ Liste links ausrichten aber anders herum floaten

[blubbbla]

Ich habe eine Box. In dieser Box befindet sich eine Überschrift und eine Liste:

<div class="box">
            	<h4>überschrift</h4>
                <div class="pages_top">
                	<ul>
                		<li class="border_none"><a href="#" class="arrow_left"></a></li>
                		<li>Seite <a href="#">1</a></li>
                		<li><a href="#">2</a></li>
                		<li><b>3</b></li>
                		<li>...</li>
                		<li class="border_none"><a href="#">50</a></li>
                		<li class="border_none last"><a href="#" class="arrow_right"></a></li>
                	</ul>
                </div>
                <div class="side_by_side"></div>
			</div>

h4 {
	/* box header */
	font-size:12px;
	font-weight:normal;
	color:#000000;
	background-color:#ebebeb;
	padding: 4px 12px 4px 12px;
}
.pages_top{
	padding:3px 12px 0 12px;
	float: right;
}
.pages_top ul,
.pages_bottom ul{
	padding:0;
	margin:0;
	list-style-type: none;
}
.pages_top li,
.pages_bottom li{
	float:left;
	border-right:1px solid black;
	padding:0 5px;
}

also die überschrift ist links und die liste rechts.

Ändert sich nun die Leserichtung von rechts nach links, soll die überschrift nach rechts rutschen und die liste nach links. Und die Liste muss nun anders herum floaten. Also überschreibe ich:

h4{
	float: right;
}
.pages_bottom,
.pages_top{
	float: left;
}
.pages_top li,
.pages_bottom li{
	float:right;
}

Im Opera geht das wunderbar. Aber die restlichen brwoser schieben die Liste auch nach rechts

 

[Maik]

Hi,

die übrigen Browser interpretieren hier einfach die float:right-Deklaration für die Listenpunkte li anders, und richten daher die Liste auf der rechten Seite des Anzeigebereichs aus.

 

[blubbbla]

Hm und kann ich da mein Vorhaben überhaupt realisieren und wenn ja, weiß jemand wie?

 

[Maik]

Du belässt es in diesem Fall bei float:left für die Listenpunkte li, und notierst sie stattdessen im HTML-Code in umgekehrter Reihenfolge.