Standards Compliant CSS Linkbox

I got really excited the first time I saw Ryan Trash's Simple Rounded Corner CSS Boxes. I decided to apply the technique to make a box that would be a link.

Linkbox that has not been visited

See the linkbox in action.

HTML for a box follows:

<div class="linkbox">
<a class="linkbox"
href="http://siteyouprobablyhaventvisited.com/">
<span class="linkbox_head">
<span class="linkbox_heading">
<span>CSS<br />Linkbox</span>
</span>
</span><span class="linkbox_body">
<span class="linkbox_body_content">
<img alt="" src="images/turtle.png" />
<p>
This box is linked to siteyouprobablyhaventvisited.com.
</p>
</span>
</span>
</a>
</div>

It was pretty straightforward. One link, and box elements inside of it, changing block level elements to inline elements.

As a bonus, the visited boxes have different appearance:

Linkbox that has been visited

When hovering over the box, there is an extra line outside the box. Images use standard colors for links, blue for not visited link and purple for visited.

Border for hovering cursor (link not visited)

Border for hovering cursor (link visited)

There was a minor problem with IE6. It refused to show a:visited:hover links. So I ended up creating a little different apprearance for IE6, showing a normal link, visited link, and hovering link as follows, respectively:

Linkbox image (normal) for IE6

Linkbox image (visited) for IE6

Linkbox image (hover) for IE6

Because IE6 figures :hover is :hover in all circumstances, hovering image needs to be the same (i.e. neutral - gray in this example) whether link has been visited. (I'd feel stupid to use a blue line with a visited box, or a purple one with a normal link). If you know a workaround, please drop a line.

So, if you haven't done it yet, you might want to see the linkbox in action.

Utility Room