CSS, Internet Explorer, DIV Hot Spot Link, FAIL!
Today’s post is going to be posted in both the /faceplant and CSS portion of the blog today. I do enjoy fixing IE CSS Errors... but come on! Really? This one KILLS ME. If anyone has a better solution, please let me know and I’ll get it posted. Honestly I’ve only checked in IE 7 & 8... I’d hate to see what happens in IE6.
Situation:
You want to create a CSS "hot spot" with a div container. The reason you need a div is because "behind" the div is some dynamic content – lets say an image for this purpose. Your layers are as such:
- div.container
- image within div 'container'
- action you want taken when roll over / hot spot is hit (div.ShowMe)
- the actual hot spot container (div.RollMe)
View the HTML / CSS Setup here:
http://www.vipersuite.com/samples/css/ie_zindex_hot/without.html
.container needs to be positioned as relative due to the absolute divs within. We don’t want them floating around on the page, we want them inside the container.
.RollMe is positioned absolute and in the center of the .container. Using a block display and a specific z-index, height, and width.
.ShowMe is hidden until the .RollMe gets a "roll-over" action.
I know I am kind of assuming you can read JavaScript / jQuery... but you can tell in the jQuery what it is doing.
Point being, take a look at the code with the above link... test in FireFox... then test in Internet Explorer... stupid right? I know. I’ll tell you how to fix it...
View the HTML/CSS changes:
http://www.vipersuite.com/samples/css/ie_zindex_hot/with.html
What I believe to be happening is the div.RollMe doesn’t "exist" in the previous html document. It is used as something other than an element... no clue why. But all I did was add a background-color to the .RollMe.. and vola! IE Reads it like a champ.
But wait, I don’t want the hover action to have color... I just needed the hotspot. Well simply fix that either with JS/jQuery or add
"-moz-opacity:.01; filter:alpha(opacity=01); opacity:.01;"
This should work just fine for you as it has worked for me. I still can’t believe that IE is being crazy like that... but that is Microsoft for you.