Display:inline not working correctly

HTML & CSS
1

Here is my css:

#navcontainer-topnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navcontainer-topnav li {
	border-bottom: 1px solid #CCC;
	margin: 0;
}

#navcontainer-topnav li a {
	display: inline;
	padding: 3px 5px 3px 0.5em;
	border-left: 10px solid #333;
	border-right: 10px solid #9D9D9D;
	background-color: #666;
	color: #FFF;
	text-decoration: none;
}

#navcontainer-topnav li a:hover, a#active_menu:link, a#active_menu:visited {
	border-left: 10px solid #1C64D1;
	border-right: 10px solid #5BA3E0;
	background-color: #80C358;
	color: #FFF;
}

and here is my html:

<div id="navcontainer-topnav">
<?php  mosLoadModules('header', -2);  ?>
</div>

When I put just this into a page it displays my menu vertically, not horizontally. In Joomla I have my menu set to flat list but it still displays vertically.

Any ideas?

Dan

2

Have you tried adding float: left; into #navcontainer-topnav li a { ?

3

A is inline by default, you should make LI inline instead.

4

Webby007,

That worked!

Now, if you don’t mind, why did it work?

Thanks again,

Dan

5

Well you have told the li elements to float left, this causes them not to go onto a seperate line but to …float next to each other as the property is applied for each li tag. so you have a string of floats! :slight_smile:

Glad to be of service :slight_smile:

I have a nice list of useful CSS Rollovers on my forum if you wanted to check them out.

Website: www.webdesignerforum.co.uk/index.php?showtopic=138