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

Question

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:

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!

Thanks!

Answer 1

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)

Answer 2

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>