IE8 resets some margins to 0 when triggering a click Javascript event

I have 3 divs with content which get their visibility triggered by clicking on 3 buttons:

http://screencast.com/t/NSlRzrIBBUb

Sometimes when I click one of the buttons I get this:

http://screencast.com/t/wjw3565BBGQ

It's like some margins get reset to 0. Even the line-height and letter-spacing seem to reset. After clicking anywhere on the screen everything returns back to normal. Everything works fine on all other browsers.

Does anybody have an ideea why?开发者_如何学Python

Thanks, Lucian

visibility:hidden/visible causes a repaint if you toggle it using a class reference, or a reflow if you toggle it using a style attribute.

Use a position:relative container to wrap each of the 3 divs. Make each of the 3 divs position:absolute. On click, add a class the sets top:-9999px.