Things I’ve learnt today:
IE wont let you layer <a> tags absolutely over images – even IE8.
I have a flowchart diagram I’m trying to layer over a couple of hotspots in a WordPress page.
Easy I think. I’ll add the image as a <img> and then absolutely position some tags over the top that are set to display:block.
Worked like a charm in Firefox – but I just couldn’t get it to work in IE (IE6, IE7 and IE8)
What happened was the blocks would display but they would only work as a link at the very edges of the block – or, if the text was showing, right over the text itself – not anywhere else within the a block area.
No matter what I changed could I get this to behave.
Solution:
Give up on the idea of using an <img> block and just have a <div>
with a background image of the flowchart – then absolutely position my anchor tag blocks over the top – works like a charn in ALL versions of IE
But I’ll never get that half an hour of my life back, will I Bill Gates?