I have an unordered list I'm displaying horizontally as the page's top menubar. I've gotten it to display relatively well, although I've been playing with the spacing for IE6 and IE7 cause it's not displaying properly. Shocking. In either case, is it better to use a table to display the menu or use some CSS hacks, which I can't find a way around? What is the best way to display the menu? I should add some of the options have dropdown menus using their own unordered lists.
+2
A:
Check out List-a-matic, it has a host of different menu templates that you can use as a base.
A simple horizontal list can be displayed using css and an unordered list
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
Derek Adair
2010-01-11 15:24:01
A:
It's hard to give a definitive answer without an SSCCE from your side (a plain <html> document including doctype and embedded styles) which reproduces exactly the problem you have. But I can at least tell that the common problem is that you didn't get the doctype right and that IE's boxmodel bug plays a role here.
If that's not the root cause, then the next possible cause is the fail in understanding how to use floats and/or inline/block elements. To get good and solid code examples to start with, Google "suckerfish menu".
BalusC
2010-01-11 15:24:22
I second the suggestion of learning the ins and outs of suckerfish imlementation. Even if you dont need to use the ful implementation it will teah you everythign you need to know (Almost haha) about using floated `li`'s for menus.
prodigitalson
2010-01-11 15:52:55
A:
EDIT:
You cant depend on display: inline-block to handle this because cross browser support is problematic. Use floats instead with dispaly: inline; position: relative.
I would continue on with the UL's. Dont use hacks for IE* though - use IE Conditionals to add different stylesheets for different versions of IE.
prodigitalson
2010-01-11 15:24:41