Annoying little validation bug

[mshort]

Hey everyone,

So my problem is starting to really frustrate me. I did this nav bar, with 2 lines of text inside each <li> I’m not so good at explaining it but if you see the code i’ve linked below you will see what i mean.

Anyway so the way I’ve done it works fine in the browser, doesnt have any display issues in either safari or firefox, (haven’t checked ie yet) but the validator says

Quote:

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Here is the code

Code:

• 
  

  Home

  Go Home

• 
  

  About Me

  Who am I?

• 
  

  Portfolio

  See my Work

• 
  

  Contact Me

  Get in Touch

[TheDoc]

If I remember correctly, you cannot have a <p> inside a <li>.

[luxurychair]

<a> is an inline element and <div> is a block element. You can’t put the <div> (or the <p>, for that matter) inside the <a> tag.

You can do it this way though.

Code:

• text or whatever here

with the css:

Code:

a.block_link{
display:block;
width:100%;
height:100%;
}

[mshort]

Thanks for that. and even though the <a> element isn’t around the other elements they will all be clickable as the link?

[luxurychair]

Yeah, so long as its height and width are set appropriately – it’ll expand and fill the area. You _should_ be able to do that with height:100% width:100%, but if not you can manually set them using px numbers and absolute positioning.

[Author]

Posts