Can you have s without them being under a

Question

I have a navigation that I am using a list for. I have it in a <ul>, but that is messing up my UI because it has weird automatic margins. I tried without the <ul> and they seem to work. Would this work across all browsers? Is this legal? Anybody else done this before?

Answer 1

It's not valid HTML to use <li> outside an ol, ul, or menu element. It's much better to assign a class to the ul element:

<ul class="nav">

And then use CSS to remove the margin and padding:

.nav {
    margin: 0;
    padding: 0;
}

Answer 2

This might not answer your question directly, but I'm wondering if you use a CSS reset?

I have found since I started using them, I don't encounter those sort of issues any more. http://developer.yahoo.com/yui/3/cssreset/

Also, another thing to consider is that your nav doesn't have to be in <li>'s (necessarily). Why not make them just links in a <div class="nav">

Hope this helps!

Answer 3

You can, and almost all browsers will recognize it, but it's not good, semantic HTML, and won't validate.

Try removing the margin and padding for the ul in your stylesheet:

#the-specific-ul { margin: 0; padding: 0; }

Answer 4

The UL and LI combination are one of the most liberally interpreted elements in all of HTML. Meaning they tend to look wildly different depending on which browser you use. As others suggest, reset the margins and paddings to 0. But you should be doing this anyway in a reset stylesheet, so that you catch the other elements that display differently across browsers.

Answer 5

It's probably working in browsers because browsers are too forgiving, but that's not valid says the validator:

Document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

Well, you can remove customize margins in CSS. That's your only solution. Generally, you can remove it on all <ul> tags in the documents by:

ul {
    margin: 0;
    padding: 0;
}

In case you're wondering what padding is, see it here.