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.

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)