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.
- voiceof0
I dont think you are supposed to put <div> in anchor tags, try a <span> tag instead. If that doesn't work put cursor: pointer; in the css for the <div>
- h2 elements shouldn't be placed within anchor tags either -> anchor is inline, div & h2 are block elements********
- h2 elements shouldn't be placed within anchor tags either -> anchor is inline, div & h2 are block elements
- 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.
- ********0
bort - what css are you using with this?
- bort0
css 2. Why?
I think this has to do with inline elements inability to contain block elements. I'm trying a hack work around with a shit ton of spans but it totally jacks my layout.
- I'm talking about the actual css code********
- that you are using********
- I'm talking about the actual css code
- ********0
post a link to your page and I'll help
- ********0
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- that's the basic idea - but without seeing yr page I can't do any more********
- This is some grown man shit right here. I'll let you know. Thanks!bort
- that's the basic idea - but without seeing yr page I can't do any more