IE7 not properly redrawing elements with position: relative

If you manipulate the DOM with JavaScript and your page contains nested elements with position: relative, chances are Internet Explorer 7 will not properly move to the right position.

I have not found a fool-proof workaround, but these are options that have worked for me:

  • Try to lose some position: relative attributes, so they do not nest. This is often impossible, though.
  • Force the correct redrawing of the elements using JavaScript. Adding a bogus class ($(element).addClass('touch')) seems to suffice.
  • Try to give the offending elements overflow: hidden.
Tobias Kraze