Grow your CSS skills. Land your dream job.

Annoying little validation bug

  • # December 28, 2009 at 10:43 pm

    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

    # December 29, 2009 at 1:12 am

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

    # December 30, 2009 at 5:25 pm

    <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%;
    }
    # December 30, 2009 at 5:27 pm

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

    # December 30, 2009 at 5:43 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".