Help with a validation error

HTML & CSS
1

The w3c validator has brought up this as an error

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

<div class="odd box newprice">

<a href="price.html"><p>Price </p></a>
</div> <!-- odd box price -->

and this css

.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

Hi,

Yes the anchor must be inside the p element.


<div class="odd box newprice">
[B]    <p><a href="price.html">Price </a></p>
[/B]</div>

You can make the anchor expand to fill the parent by setting it to display:block.


.box p a{display:block;position:relative}

(the position:relative is a fix for ie6 to make the whole area active.)

3

Works like a charm, thanks ever so much you make it seem so easy.

4

Just target the anchor as well.


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

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.