Paragraph/bullet point problems

Hey Guys

I’m in the process of designing a website using ‘Build your website the right way’.

What I wanted to do was list some bullet points, using <ul> and <li> etc. However when I did so I thought the bullet point paragraphs were too close together so added <p> to the <li>bullet points so that my paragraphed bullet points now read: <p><li>content</li></p>

This achieved what I wanted it to, i.e. bullet point paragraphs that were better spaced down the page, but when I uploaded my page to the w3c validator it stated that <p> and <li> could not be used together:

“The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements – such as a “style” element in the “body” section instead of inside “head” – or two elements that overlap (which is not allowed).”

Is this right? If so, if I’m listing bullet points, but cannot paragraph them using <p> how can I achieve the same effect? (i.e. better spacing of them down the page?)

Cheers guys.

jamesg

Hi james,

There are a couple of simple options:

  1. increase the line height of the <li>s
li {line-height: 2em;}

(really only useful if each bullet point is just one line tall, though).

  1. Add top and bottom margins to the <li>s
li {margin: 1.5em 0;}

This is the best option to use. Adjust the margins to suit. You can use pixels, of course, but I prefer ems.

alternatively (instead of adjusting the spacing with css) you can go with your original idea but just code it properly

instead of <p><li>content</li></p> which is invalid, use <li><p>content</p></li>

:slight_smile:

Thanks a lot guys for the quick responses. I’ll try them out later in the week revalidate and come back to you. :slight_smile:

Just out of interest so I can hopefully avoid similar mistakes in the future, what is ‘wrong’ with putting <p><li>content</li></p> for validation purposes!?

Is it just that <li> cannot be preceded by anything else?

jamesg

Well, yes, <li> can only be preceded by <ul>. Just how the rules were set. I don’t really see the value of using a <p> inside an <li> to create space, as it still just comes down to a CSS issue of margin/padding on the <p> anyway, so why not just place the margin/padding on the <li>?

likely because you don’t actually have to declare any css values for the P to have decent spacing – it’s built into the browser defaults

The chances of that being just the right spacing is a bit hit and miss, though, and not necessarily consistent cross-browser. And chances are that a reset or other author settings have already blown those defaults out of the water.

that’s funny

out-of-the-box P spacing has been “just right” – without any css tweaking – in all versions of html and all browsers that it has been my pleasure to work with since netscape 1 in 1995

and author css resets are nowhere near as common as you think

so there

:cool:

You obviously don’t have to bend to the will of graphic designers who insist on having everything their own way. :smiley:

Well, at least I can argue that, by adding in those <p>s, you are recommending the use of markup for presentational purposes. And despite how small an amount of extra markup that is, the CSS police are still gonna gitcha!

of course, we’ve had this discussion before (whether Ps are okay inside LIs)

let’s just say that if the list items are sentences—even one-word sentences—then semantically, the Ps are fine, and the css police can go cry in their milk

:slight_smile:

Blast, wouldn’t you know, I’ve run out! (No cereal in the morning. :frowning: )