View Full Version : Resolved IE6/7 div overflows visible after jquery DOM mods

11-25-2009, 06:01 PM
resolved: removed link

I've put together a click-highlight map using imageareas and a tweaked jquery plugin (maphilight). The plugin runs on document.ready and does the following, more or less:
- sets up a wrapper div using the original image as background
- sets opacity on the original image to zero
- builds browser-appropriate canvas
- sets up click and mouseover events

It works fine in FF3, and the click-highlight functionality itself works in IE6 and 7. However, after the plugin does its work on the DOM, IE6/7 (and IE8 in compatibility mode) show the map overflowing the parent's container and "disconnected" from it - seemingly positioned absolutely with respect to the body or viewport.

I've poked through the maphilight plugin and can't seem to get a CSS combo to fix this, and I've been unable to pinpoint the problem with IE's Developer Tools. I could use a few more eyes looking at this for me.

BTW, I've set a meta tag to force IE7 compatibility (I think) for anyone checking it out with IE8.

EDIT: Fixed. It was the IE bug with relative positioning within an overflow element. The solution for IE is to add position:relative to the container having overflow.