SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with a validation error

    The w3c validator has brought up this as an error

    Code:
    Line 56, Column 56: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag
    
    <a href="about me.html" class = "about"><p class="read"> Read On</p></a>
    I think I understand that the <p> tag should be wrapping the <a> (please tell me if that is wrong). But I can't work out how to change it without altering the layout, has anybody any suggestions

    I have this html

    Code:
    <div class="odd box newprice">
    
    <a href="price.html"><p>Price </p></a>
    </div> <!-- odd box price -->
    and this css

    Code:
    .box {
    height: 284px;
    width: 450px;
    border: solid 10px #fdc2c2;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    behavior: url(pie.htc);
    
    }
    
    .box p{
    font-size: 300&#37;;
    font-family: leaguegothic, "arial narrow", serif, tahoma; 
    color:#ec5360;
    }
    
    .odd {
    clear: both;
    float: left;
    margin: 60px 0 0 0;
    }
    
    .even {
    
    float: right;
    margin: 60px 0px 0 0;
    }
    .newprice{
    	background-position: 0 0; 
    	background-image:url(images/paying.gif); 
    	background-repeat: no-repeat;
    	
    }
    .newprice p{
    
    	width: 90px;
    	text-align: center;
    	margin: 100px 0 0 320px;
    }
    Site can be viewed at www.anna-b.co.uk if that helps

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Yes the anchor must be inside the p element.

    Code:
    <div class="odd box newprice">
        <p><a href="price.html">Price </a></p>
    </div>
    You can make the anchor expand to fill the parent by setting it to display:block.

    Code:
    .box p a{display:block;position:relative}
    (the position:relative is a fix for ie6 to make the whole area active.)

  3. #3
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have realised I didn't expalin correctly what the problem is, it isn't actually the layout that I have a problem with but a problem with losing the styling of the text. When I put the <p> tag around the anchor as it should be the text reverts back to having the underline for a link and also turns to its default purple color, however it is still positioned correctly with the correct font and size. How can I make the change whilst retining the style that is originally set for it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Just target the anchor as well.

    Code:
    .box p a, .box p a:visited {
        color:#ec5360;
        text-decoration:none;
    }

  5. #5
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works like a charm, thanks ever so much you make it seem so easy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •