Alternatives to illegal or within tags on a hover?

Question

Does anyone have a suggestion for creating paragraph-type line spaces within a

tag that includes a hovered pop-up pseudo-class?

I have a

Answer 1

You could stick another span in there as a "fake" p tag:

  <li><a href="">List item
      <span>
         <span>words words words that are "paragraph" 1 of List item</span>
         <span>different words that make up "paragraph" 2 of List item</span>
      </span></a></li>

And in your css:

#rightlist span span {display:block;margin:...}

Note anything you declare for #rightlist span will apply to #rightlist span span, so you might need to override some of the rules in #rightlist span span.

Answer 2

Why is your current way wrong ?

You can try this

<span>
  <p>words words words that are "paragraph" 1 of List item</p>
  <p>different words that make up "paragraph" 2 of List item</p>
</span>

Answer 3

Your problem may arise from the fact that you're using a <span> tag incorrectly.

Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.

Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).

Answer 4

Err there's nothing wrong with having <br> inside <a> or <span>. It's perfectly valid according to the HTML 4.01 spec.

Edit: <li> can contain <p>, <br>, and pretty much anything else.

The spec is a bit hard to read but basically says:

• LI can contain block or inline
• block is made of P + some other things
• inline is made of special + some other things
• special is made of A + BR + some other things

Regarding <a> it says:

• A can contain inline except A
• inline... see above

Answer 5

Why is it 'Wrong'?

your br tag should perhaps be coded as:

 <br />