<div>'s inside of <a> - Is there an alternate?

[WebMachine]

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.

<a class="thumbnail" href="#thumb">
				<div class = "thumb last">
				<img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
				<p>Kwasind Shirt</p>
				</div>
			<span><img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/><br />Kwasind Shirt (orange) ... $12.00</span></a>

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?

[vanishdesign]

Change the div to a span and set it to display: block. Give them both classes if one has positioning and the other doesn't.

[rustybuddy]

I would do exactly what you have except make the image itself a link, then link the text too. That would, in my mind, be the proper way.

<div class = "thumb last">
   <a class="thumbnail" href="#thumb">
      <img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
   </a>

   <a class="thumbnail" href="#thumb">
      <p>Kwasind Shirt</p>
   </a>
</div>

<span>
  <a class="thumbnail" href="#thumb">
      <img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/>
  </a>
  <a class="thumbnail" href="#thumb">     
<br />Kwasind Shirt (orange) ... $12.00</a>
</span>

[Chroniclemaster1]

Change the div to a span and set it to display: block. Give them both classes if one has positioning and the other doesn't.

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.

[WebMachine]

Thanks for your suggestions. I don't have time to try them until later today, but when I do, I will let you know how it goes.

[AlexDawson]

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.

[Stevie D]

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.

<a class="thumbnail" href="#thumb">
				<div class = "thumb last">
				<img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
				<p>Kwasind Shirt</p>
				</div>
			<span><img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/><br />Kwasind Shirt (orange) ... $12.00</span></a>

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?

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).

[Stomme poes]

The benefit of an anchor though is you can :focus on it as well.

For this reason, I use anchors for stuff like this (and also, so I can avoid any unnecessary scripting for IE6 if I'm not already using it anyway).

[eruna]

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.

[rustybuddy]

Yup, exactly right. I posted my adjustments in haste.

this should be a little better

<div class = "thumb last">
   <a class="thumbnail" href="#thumb">
      <img src = "images/orangeShirtThumb.jpg" width = "70" height = "70" alt = "Orange Kwasind Shirt" />
   </a>

      <p>
         <a class="thumbnail" href="#thumb">Kwasind Shirt</a>
      </p>
   
</div>

<span>
  <a class="thumbnail" href="#thumb">
      <img src = "images/orangeShirt.jpg" alt = "Orange Shirt" width = "300"/>
  </a>
      
<br /> <a class="thumbnail" href="#thumb">Kwasind Shirt (orange) ... $12.00</a>
</span>

[deathshadow60]

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.

<a class="thumbnail" href="#thumb">
	<img src="images/orangeShirtThumb.jpg"
		width="70" height="70"
		alt="Orange Kwasind Shirt"
	/>
	Kwasind Shirt
	<span>
		<img src="images/orangeShirt.jpg"
			alt="Orange Shirt"
			width="300"
		/>
		Kwasind Shirt (orange) ... $12.00
	</span>
</a>

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).

[Stomme poes]

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.

[AlexDawson]

I can vouch for Windows Eyes and a couple of less well known screen readers that also do the same (at least in my copies).

[WebMachine]

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.