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.
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?
Okay, it’s going to take me a few hours to digest all this information and your suggestions. Thanks for all of them … much food for thought. I am going to try to fix it tonight, but I am very nervous that as soon as I start to fiddle around with the code (which does work well) the page will break and I will be back to square one. Keep your fingers crossed.
I can vouch for JAWS not reading out display: none and visibility: hidden elements. Dunno about current Window-Eyes, old versions also ignored display: none. They are aware of stylesheets, and figure if something was meant not to be displayed, it will not be copied to the virtual buffer.
I would do it like RustBuddy accept put the <a> inside the paragraph and take the class off the link. If they are the same then they are not necessary. Just refer to them from the parent element.
Paragraph is ALSO invalid markup inside the anchor folks - it too is a block level container. NOT that I see ANY reason to need an extra container around the the first image or the text under it, since you can style the parent ANCHOR.
Should be ALL that is needed there. Set the anchor to display:block and everything you were doing to the DIV do it on the anchor, set both nested images to display:block, set text-align to center, position the span for your hover effect. You shouldn’t need ANY block-level containers in that… It’s an excellent example of a paragraph around non-paragraph content.
I would also advise AGAINST using visibility:hidden to hide them - since you’re absolute positioning them anyways just set them to left:-999em and then set it to left:0; on hover. Visibility:hidden much like display:none can cause screen reader and search engine issues (allegedly, I’ve seen no real proof of it, but better safe than sorry).
You really can’t wrap an <a> around a code block like that! It can only contain inline elements, so that rules out <div> and <p>. As the <a> is not really a link, I think it would be better to get rid of it, and do the fancy stuff on the <div>. That way, you can use div.thumb:hover span {…} to show the image (it won’t work on IE6 as is, but you can script that in).
Sorry to break this to you but your paragraphs are also invalid. P elements are block level (alike DIV) and therefore cannot exist within an anchor. I would seriously suggest you re-think the way your trying to accomplish the task, you could quite easily apply the :hover state onto any parent element and have it achieve the goal upon rolling over the item (though IE6 would need some scripting assistance). rustybuddy’s code is as invalid as your’s is.
This sounds like the best approach to me. You can swap out the div element for a semantically correct span and the behavior “should” be the same. We may need to tweak a little, but this is what I would try.
