CSS horizontal alignment

Horizontal alignment via css

[rakhi]

Hi All,

I've been trying various solutions to help me align a ul's horizontally using css across both ie and ff browsers.

I have found a some workarounds, however how do I control the "gap" or "space" between list items when aligned horizontally?

I have adding borders and this has helped to some extent but I would like more control.

Also suggestions for the best cross browser horizontal alignment solutions would be appreciated.

Thanks - R

[subway]

Have you tried adding a margin to <li>?

e.g.

#mainNavigation li {
display: inline;
margin: 0 3px;
}

That's worked for a couple of horizontal navs I've done but haven't tested it on older browsers.

[fireguy]

try this:

ul.navigationBar {
list-style:none;
margin:0;
padding:3px;
}

ul.navigationBar li {
display:inline;
}

ul.navigationBar a {
border-width: 1px 1px 0 1px;
border-style:solid;
border-color:#ddd;
padding:3px 5px 3px 5px;
position:relative;
}

if you want to remove the li gaps do your html like so:

<ul class="navigationBar"><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>

if you do the following, ie will place spaces between the li's:

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>