Inline list

[Daz]

I want to create an inline list for a top nav bar so that all of the links sit to the left except for the search box which would be aligned to the right. My problem at the moment is the entire navbar is too wide with the text links on the left vertically aligned in the middle and the search box on the bottom. Here's my coding:

 #topmenu ul {
 	margin: 0px;
 	padding-left: 3px;
 	list-style: none;
 }
 #topmenu li {
 	float: left;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	color: #ffffff;
 }
 #topmenu li.search {
 	float: right;
 }

 <div id="topmenu">
 	<ul>
 		<li><a href="index.htm">Home</a> |</li>
 		<li><a href="sitemap.htm">Site Map</a> |</li>
 		<li><a href="links.htm">Links</a> |</li>
 		<li><a href="help.htm">Help</a> |</li>
 		<li><a href="feedback.asp">Feedback</a> |</li>
 		<li class="search"><label for="search">Search</label> <input type="text" name="search" /></li>
 	</ul>
 </div>

[BenANFA]

You need to add a display: inline to your li styles. <li>are block level elements by default and will start on a new line by default without this style.

#topmenu ul {
 	margin: 0px;
 	padding-left: 3px;
 	list-style: none;
 }
 #topmenu li {
 	float: left;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	color: #ffffff;
	display: inline;
 }
 #topmenu li.search {
 	float: right;
 }

[Daz]

That doesn't cure my problem. The page renders properly in Moz 1.3 and Opera 7 but its in IE6 I have the problem with the nav bar displaying at about 50px high.

[DaveMaxwell]

I'm thinking the problem is you've got the float and the position on the li, and I'm betting it gets confused doing it that way.

Did you try to put the display: inline on the li.search and also add a <br style="clear:both" /> after the ul just to be sure the floats are brought back into the document flow?

You could probably get away with removing the position: relative and float:left on the default li and just have the float: right for the other one (you will probably want to have the other margin, padding, color etc on the li.search also just to be sure it's getting applied equally).

[Daz]

I've tried that Dave and it doesn't work Seems to be with the content floating to the right there's like a block above it which IE6 only displays. This is what I have now:

 <style>
 #topmenu ul {
 	 margin: 0px;
 	 padding: 0px 2px;
 	 list-style: none;
 	display: inline;
 }
 #topmenu li {
 	margin: 0px;
 	padding: 0px;
 	color: #ffffff;
 	display: inline;
 }
 #topmenu li.search {
 	margin: 0px;
 	padding: 0px;
 	float: right;
 }
 </style>
 <div id="topmenu">
 	<ul>
 		<li><a href="../index.htm">Home</a> |</li>
 		<li><a href="../sitemap.htm">Site Map</a> |</li>
 		<li><a href="../links.htm">Links</a> |</li>
 		<li><a href="../help.htm">Help</a> |</li>
 		<li><a href="../feedback.asp">Feedback</a></li>
 		<li class="search"><form action=""><label for="search">Search</label>&nbsp;<input type="text" name="search" class="srchbox" /> <input type="submit" name="submit" value="Go" class="srchbtn" /></form></li>
 	</ul>
 </div>

[BenANFA]

Not with the CSS and HTML posted, I get a topmenu height of about 0px using IE6

I assume that you have only posted fragments of your code so I sumise
that it is something that you haven't posted that is causing the problem.

[DaveMaxwell]

Try adding #topmenu form { margin: 0px; padding: 0px; } and see if that makes a difference. Forms have a small padding/margin on them by default.

[Daz]

Sorry, already done that, I'd forgotten I'd done a general form { margin: 0px; padding: 0px; }

[jag5311]

Off Topic:


This is a general question
What is the purpose of using <li> tags if the idea is to have the items side by side? I know <li> are becoming popular as menu sectors, but isn't it just easier saying <span>item1 item2 item 3, etc..

[BenANFA]

Off Topic:

This is a general question
What is the purpose of using <li> tags if the idea is to have the items side by side?
I know <li> are becoming popular as menu sectors, but isn't it just easier saying <span>item1 item2 item 3, etc..

It's a good question, and I tend to agree with you, unless you have some
reason for the items to appear as a vertical list if CSS is disabled, then you don't
even need spans, just put in a list of <a> tags.