CODEWITHSUNDEEP
htmlhtml-lists
chromedude
chromedude

Reputation: 4302

Can you have <li>s without them being under a <ul> or <ol>?

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?

Upvotes: 9

Views: 8470

Answers (5)

Ruel
Ruel

Reputation: 15780

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.

Upvotes: 7

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 1

Simon Lang
Simon Lang

Reputation: 42675

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!

Upvotes: 3

PleaseStand
PleaseStand

Reputation: 32082

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;
}

Upvotes: 8

Matchu
Matchu

Reputation: 85802

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; }

Upvotes: 3

Related Questions