I am doing a page which displays thumbnails that have titles under each, and when the mouse hovers over a thumbnail, a larger version of the image shows up to the right with a caption describing the item and its price. I got the code from one of the css libraries. It works like a charm, but doesn't validate because of the block-level <div> inside the inline <a> element.
The gallery works by using the visibility:hidden and visibility: visible along with absolute positioning on the <span> in the css . I have included a screen capture so you can see what I am describing.
<a class="thumbnail" href="#thumb">
<div class = "thumb last">
<img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
<span><img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/><br />Kwasind Shirt (orange) ... $12.00</span></a>
The only solution I can figure out is to change the <div> to a <span>, but does that work with all the browsers? I don't want to break the page just for the sake of it validating, but it really bugs me that it doesn't validate. Any suggestions?