Align a horizontal list to the right

The problem

I am trying to float a list to the right.

There are 2 ways that I can see to do this that do not work in all browsers

  1. Set the UL to float right and set the LI to inline. This works great but you can't set padding or margin on inline elements on IE 5.5 (5 too?)
  2. Float the UL to the right and float the LI to the left within that.

If you go with number 2 you have to set a width to the UL to please Opera 6. In an ideal world (not opera's) you don't need the width on the UL and if you set it inline it would only be as big as the elements contained within it. Therefore the whole thing would be on the right hand side.

The problem is that when you add a width to the UL you need to get the LI's to go to the right side of that. Textalign: right does not work and if you float the LI's to the right then your links would be in the wrong order.

For a while I set would set the width of the UL in ems so that it would be just wide enough to contain the LIs. There is a much simpler solution though.

The solution

At last! A much better way of doing this! The key is to add a height of 1em to the link in the LI. This allows padding to be added in IE5.5 and means we don't have to worry about Floats. Only slight problems are that:

  1. Opera 6 Mac doesn't want to show the bullet image.
  2. To get the background colour of the UL to show in IE 5.5 and 6 you have to give it a width (or maybe a height). This then can cause box model problems (easy to sort) if padding used.
  3. IE Mac does not add the right margin padding of the A meaning that unless you use the above method (or ignore it!) you can't push the list away form the end of the block

XHTML:

<div id="topnav">
      <ul>
         <li><a href="#">W&amp;DB Brand Division</a></li>
         <li><a href="#">Our Brands</a></li>
         <li><a href="#">Brewing History</a></li>
         <li><a href="#">Perfect Pint</a></li>
         <li class="last_horiz_link"><a href="#">Contact</a></li>
      </ul>
</div>


CSS:

/*width needed to show bg colour for IE 5 and 5.5.(might be able ti use a height) Could run into box model problems here if padding used so padding added to last link. */
#topnav ul{
background: #7978ff;
margin:0;
padding:0;
text-align:right;
width:100%;
}

/*this gets it on one line*/
#topnav li{
display:inline;
}

/*give this a height of 1em allows IE5.5 to have padding. bg image not shown on opera 6 mac*/
#topnav li a{
height:1em;
padding:0 0px 0 15px;
background:url(/img/bg/arrow.gif) no-repeat left center;
margin-right:5px;
}

/*pushes away from edge - IE mac does not do this though*/
#topnav li.last_horiz_link a{
margin-right:15px;
}