jQuery fadeIn/fadeOut in IE mess the layout

Question

Hi,

I have a div which contains multi-columns layout and when I click on a button I want that this div fade out and then clicking on an another button this block would fade in. Simple and it works perfectly on firefox.

However when I fade it out inside IE the layout of my columns is modified. It is as if my columns are transformed in non-block elements.

Replacing my fadeIn/fadeOut by show/hide solves my problem but it would be more usable if I could add those animations on this...

Could anyone help me?

Answer 1

Unfortunately for IE we sometimes need to sacrifice clean code! Put the div to fadeOut inside another div with the height and width set in CSS. This will then maintain the width of the column in IE.

Answer 2

The opacity filter for fading requires (in IE only) that the element be set for CSS styling (hasLayout in IE). You can do so by either setting height or width of the element or by setting the zoom: 1 css style property, which effectively does nothing (1 is the default).

See this link for information about IE's hasLayout: http://www.satzansatz.de/cssd/onhavinglayout.html