menu float right gives reverse list effect

[scherpenzeel]

Hi I have a strange problem. I have a menu box. First it was lined to the left since the design is asking for the menu showing on the right I have done float right for the li part. Now its giving me the wrong result:The menu: which shows of nice, but with the list in reverse order? starting with the last href instead of starting with the first one = index.

<div id="menu">  <ul>  <li><a href="?actie=index_3a">Home</a></li>  <li><a href="?actie=log">Log</a></li>  <li><a href="?actie=recepten">Recepten</a></li>  <li><a href="?actie=contact">Contact</a></li>  <li><a href="?actie=workshop">Workshop</a></li> <li><a href="http://www.emaand.nl" target="_blank"> Pizza van de maand!</a></li> </ul></div>

How can I get this lined up in teh right way?this is the css for this part:

#menu{	width:973px;	padding-top:5px;	padding-bottom:0px;	padding-left:0px;	height: 31px;	padding-right: 0px;	margin: 0px;	margin-right:0px;	margin-bottom: 0px;	margin-left:0px;	background-image: url(/pizzatest/afbeeldingen/menu.jpg);	background-repeat: no-repeat;	background-color: #FFFFFF;		}/* ------------------- menu boven lijst opmaak ------------------- */ #menu ul{	width:973px;	padding:0;	margin:0;	list-style-type:none;	color: #003399;	}#menu li{	display:inline;	color: #003399;	float: right;	}	#menu li a{	color: #666600;	text-decoration: none;	font-size: 90%;	padding: .2em .5em;	background-color: #E9FFD2;	text-transform: none;	}#menu li a:hover{	color: #FFFFFF;	background-color: #666600;	text-decoration: none;}	#menu li a:active{	color: #666600;	font-weight: bolder;}

How to Get this right? here is a sample for both ie and ff: My Webpage

[aspnetguy]

It is because you put the float on the li element. try it on the ul.

[scherpenzeel]

It is because you put the float on the li element. try it on the ul.

<{POST_SNAPBACK}>

OK I wil try that. Thanks for your help.I have tried it but than the menu is again on the left so I thought than also have float with the li but that does not make a difference.

[aspnetguy]

you could also try in #menu adding text-align:right that should move the ul to the right

[scherpenzeel]

you could also try in #menu adding text-align:right that should move the ul to the right

<{POST_SNAPBACK}>

No its not working than its again on the left hand... I keep on trying

[scott100]

No its not working than its again on the left hand... I keep on trying

<{POST_SNAPBACK}>

addind text-align:right to the div and removing the float works fine

#menu{width:973px;padding-top:5px;padding-bottom:0px;padding-left:0px;height: 31px;padding-right: 0px;margin: 0px;margin-right:0px;margin-bottom: 0px;margin-left:0px;background-image: url(/pizzatest/afbeeldingen/menu.jpg);background-repeat: no-repeat;background-color: #FFFFFF;border:0px solid black;text-align:right;}/* ------------------- menu boven lijst opmaak ------------------- */ #menu ul{width:973px;padding:0;margin:0;list-style-type:none;color: #003399;}#menu li{display:inline;color: #003399;} #menu li a{color: #666600;text-decoration: none;font-size: 90%;padding: .2em .5em;background-color: #E9FFD2;text-transform: none;}#menu li a:hover{color: #FFFFFF;background-color: #666600;text-decoration: none;}#menu li a:active{color: #666600;font-weight: bolder;}

[aspnetguy]

ahhh I forgot about removing the float when using text-align.Man my brain is like goo today. I hate getting up at 5:30am!

[scott100]

ahhh I forgot about removing the float when using text-align.Man my brain is like goo today. I hate getting up at 5:30am! 

easy to forget 5:30 :blink:You the local milkman :) zzzzzzzz

[scherpenzeel]

easy to forget  5:30 :blink:You the local milkman :) zzzzzzzz

<{POST_SNAPBACK}>

Thanks Both for your "early" reply. I changed it into the align right but then I am ending up the wrong way. Now the menu is back on the left side again and what I wanted is having it on the right side But when I use float right the hrefs are messed up and showing of reversed (the other way auround)instead of hrf1, href2, href3, href4 it end up like href4, href3, href2, href1.in my sample hrf1=homeStrange behaviour.. Pherpahs the only solution is adding an additional div which i then float to the right? But that's not what i wanted. So someone with an other clever idea?

[scott100]

Thanks Both for your "early" reply. I changed it into the align right but then I am ending up the wrong way. Now the menu is back on the left side again and what I wanted is having it on the right side But when I use float right the hrefs are messed up and showing of reversed (the other way auround)instead of   hrf1, href2, href3, href4 it end up like href4, href3, href2, href1.in my sample hrf1=homeStrange behaviour.. Pherpahs the only solution is adding an additional div which i then float to the right? But that's not what i wanted. So someone with an other clever idea?

<{POST_SNAPBACK}>

Uss the css that i posted earlier (post #6), that aligns the menu to the right and keeps it in the correct order.

[scherpenzeel]

Uss the css that i posted earlier (post #6), that aligns the menu to the right and keeps it in the correct order.

<{POST_SNAPBACK}>

Thanks guys now it looking the way i wanted it.

[aspnetguy]

easy to forget  5:30 :blink:You the local milkman :) zzzzzzzz

<{POST_SNAPBACK}>

no I had to work early to finish up a project on time