Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts

    IE6/7 div overflows visible after jquery DOM mods

    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.
    Last edited by tomws; 11-25-2009 at 08:46 PM.
    Are you a Help Vampire?


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •