Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member XternalRage's Avatar
    Join Date
    Dec 2012
    Posts
    33
    Member #
    34041
    Hey guys,

    I'm working on a page for a new site I'm planning on putting up and I had a question. This is my first time doing a layout with a style sheet and without using a table to layout my page. I am happy with the results I am getting even if I had to get over a few hurdles I would have avoided if I used a table (reading through the website reviews on these forums really inspired me to take the time to get out of my comfort zone and become a little better at web design). Now to get to the point, I used the W3C Mark up Validation Service to check my coding for errors and there is one that is coming up and I'm not sure if i should change it. What I'm using it for still works but should the error supersede the functionality?

    my code is something like this:
    HTML Code:
    <a href="random.html">
    <div class="update">
    
        <h3 class="title">title</h3>
    
        <p class="text">Paragraph here</p>
    
    </div>
    
    </a>
    I know the problem is
    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>").
    because thats what the validation is telling me, but having the code that way still gives me my desired outcome (at least on firefox).

    I was thinking of trying to put the anchor inside the DIV and around the header and paragraph, and then setting it as "display: block; width; 100%; height: 100%;" I'm not sure if that would work but I thought I would ask before messing with something that seems to be working even if it might not be proper.

    What are your suggestions?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You could, but then the validation will still fail since p and h3 are both block level elements. There's nothing wrong as such with what you're doing, and in HTML5 it's acceptable syntax. But in older doctypes, it will fail.

    So you can either change your doctype to HTML5 or live with the "error", knowing that there's nothing really wrong.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member XternalRage's Avatar
    Join Date
    Dec 2012
    Posts
    33
    Member #
    34041
    TheGAME1246,
    I knew you were going to be the one to reply. I think I will just live with the error for now. thanks for the help.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Is that a bad thing?

    And no problem. Actually, if you don't have a reason to use headings, you could replace the h3 and p tags with span tags and declare them as block-level elements. You'd pass a validation check and retain your functionality.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Member XternalRage's Avatar
    Join Date
    Dec 2012
    Posts
    33
    Member #
    34041
    It actually didn't say anything about the h3 or p tags. It was talking about my div tags. Maybe I should have posted this as well.

    document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
    I could probably do away with the h3 and p tags but I'm not sure it will solve my problem.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    They're all block level elements. If you removed the div and just analyzed the code with the h3/p tags, you'd get the exact same error.

    You could do the same thing with the div tags as well. Basically, you replace them all with span tags.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Member XternalRage's Avatar
    Join Date
    Dec 2012
    Posts
    33
    Member #
    34041
    Hmm, to be honest I have never used span before but I'm guessing it wouldn't be just as simple as changing out the tags when the CSS for the DIV tag looks like this.

    div.update {
    float: right;
    margin-right: 15%;
    margin-top: 1%;
    border-width: 1px 2px 3px 1px;
    border-style: solid;
    border-color: #46523C;
    background: #fff;
    width: 19%;
    height: 150px;
    z-index: 1; }

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    All you should need to do is change the div.update to span.update and add display: block; to it. Everything else you could leave as is.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Member XternalRage's Avatar
    Join Date
    Dec 2012
    Posts
    33
    Member #
    34041
    I had done a quick swap of it yesterday to see if it would work and it messed it all up, but i was thinking after reading this that maybe it was because I had a second portion for the :hover effect. I changed it all and it got rid of the issue. Now the only issue is in my CSS where I found some CSS Code for the gradient background for the nav bar. Its giving me some parsing errors. I didn't write the code but I don't want to change their code with out knowing exactly what some of it is. I'll just post it here unless you want me to make a new thread for it.

    background: #46523C; /* for non-css3 browsers */
    filter: progidXImageTransform.Microsoft.gradient(startColorstr=' #AAA347', endColorstr='#46523C'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#AAA347), to(#46523C)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #AAA347, #46523C); /* for firefox 3.6+ */
    what do you think?

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The filter is what's screwing it up because it's specifically for IE.

    You've got two options:

    1) You can use CSS3PIE if you want to use any linear gradients and things of that sort.

    2) You can create an IE-only stylesheet, call it with a conditional comment, and throw your filter into it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com