CSS works in Firefox but not IE9

Question

I'm having a problem with a floating div with href around it. The link works in FF but not in IE9. I'm hoping it's something simple but I'm left scratching my head. Easy points for someone!!

In any event, here's the page: http://www.insurancedepotdentalonline.com/

You will see at the bottom of the page it says 'For Health Insurance, Life Insurance or Medicare' and then a big red circle with Click. I have a div positioned over that red circle and a link around the div. It works in Firefox and Chrome but not in IE. Not sure why not.

For what it's worth, when I add a background to the div to see how big it is, the link works fine in IE. But when I remove it, the link disappears. It's like there's something wrong with the width.

Answer 1

Interesting... inspecting the structure through IE's developer tools (just press F12), the div inside the link seems to be in the right place, but the link is only working if you click a bit to its right...

-- edit --

Your "For-health-click-here" div is superimposing the link. You could either move its declaration to a place before the link (you'll have to readjust the link position too) or mess with it's z-index.

Answer 2

Not sure if this is the problem.. but putting block elements (div) inside inline elements (a) is invalid html and could be choking in IE?

See here for more details.