Wrapping a div in an anchor tag
- Started
- Last post
- 10 Responses
- bort
I'm building a page with thumbnail navigation. Each nav item consists of a thumbnail and a title below. I'm setting the thumbnails to fade in and out on rollover with js. It's working well in every browser but IE. Problem is, when mousing over a thumbnail in IE, rather than getting the little hand that indicates a link, the cursor remains an arrow. If I click over the title area the link still works, but no hand cursor ever appears.
Here's my markup:
<a class="roll" href="">
<div class="homeThumb">
<img src="images/thumb_3.jpg" width="182" height="110" alt="thumb" />
<h2>Title goes here</h2>
</div>
</a>Does anyone know how I can resolve this? It works fine in every other browser. It's not the js messing things either; it's bunged up with the markup alone.
- bort0
Cool. I'll give it a shot.
- bort0
The proper cursor now appears but IE still won't recognize the thumbnail region of the link. If I hover over the <h2> area, the link works. The <img> area, the link address appears in the browser window, but it won't actually work.
- foobaz0
You can try an onclick handler in the div itself...it won't work if javascript is turned off...but as long as you have the anchor tag wrapped around the image pointing to the same location that is a good fallback.
- lukus_W0
bort - what css are you using with this?
- lukus_W0
post a link to your page and I'll help
- lukus_W0
Change your markup to...
<div class="homeThumb">
<a class="roll" href="">
<img src="images/thumb_3.jpg" width="182" height="110" alt="thumb" />
</a>
<h2>Title goes here</h2>
</div>Then using CSS
1. set 'position: relative' on the containing div
2. make your anchor 'position: absolute', display it as a block-level element and make it equal width / height as the div.
3. set the z-indexes to place the anchor element below the h2 and img elements