CODEWITHSUNDEEP
htmlxhtmlw3c-validation
qalbiol
qalbiol

Reputation: 475

Valid XHTML error - <div> is not allowed in <a>

I am trying to validate my document as XHTML 1.0 Transitional. I have the following error:

Line 73, Column 137: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

Which corresponds to this code:

<td><a href="download.php?f='.$file.'"><div class="download"></div></a></td>

Which I know is incorrect because a <a> can't contain a <div> tag. CSS code is:

.download { 
    width:30px;
    height:24px;
    background:url('../images/download.png') 0 0; 
}
    
.download:hover{ background:url('../images/download.png') 0 -24px;}

I am trying to show a link to download a file, the CSS puts the image and hover image, which are:

download

But inverting tag order like:

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

Shows the correct image and hover image, but not a clickable link. I don't know how to show the correct link.

Upvotes: 1

Views: 483

Answers (2)

kapa
kapa

Reputation: 78671

The link is not clickable because it is inline and is empty. This means it has zero width and height, so it is basically invisible. You should turn the <a> into a block element (so it will automatically adjust to the parent's width), and adjust it to its parent's (the div's) fixed height:

.download a { display: block; height: 100%; }

Of course this is for the valid markup:

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

jsFiddle Demo (with simple colored background, but it makes no difference)

Upvotes: 3

Braden
Braden

Reputation: 1558

Why not just style the tag like you do with the .download class and get rid of the div. For instance, change it from 

<td><div class="download"><a href="download.php?f='.$file.'"></a></div></td>

to

<td><a class="download" href="download.php?f='.$file.'"></a></td>

Upvotes: 2

Related Questions