The bug
In IE there seems to be a bug when
hiding content within a hidden container div. The content will remain to be displayed, as can be seen when the container is re-shown again. It occurs in the following situation:
- Only occurs on IE (tested IE6, IE7). Doesn't occur in FF3, Op9, Saf3onWin, Chrome
- Both the container and the content must be positioned non-static, so: absolute or relative
- First the container must be hidden (ie. display set to 'none'), next the content hidden (ie. display set to 'none'). If the order of hiding is the other way around, the bug does not occur.
Try it
To the left is a container div (red square) containing an image (rabbit in hat).
- Set both the container and the rabbit to position: 'absolute' or 'relative'
- First set the container to display: 'none'
- Next set the rabbit to display: 'none'
- Set the container to display: 'block' again.
The rabbit is still visible, even though its display=none! Once more setting the rabbit to display 'none' doesn't help, the rabbit remains visible.
'Fixes'
- 'Release the spell' by setting the content (rabbit) to display: block again. Now it will again react and disappear when setting its display: 'none'.
- Set the content (rabbit) to visibility: hidden.
Interestingly, when the rabbit has position 'relative' you now can re-show it again by setting visibility 'visible', but this is not possible if the rabbit's position is 'absolute'. The wonderful world of IE...
This issue was first discussed in: http://groups.google.com/group/jquery-en/browse_thread/thread/429f63dcb679da23#, Ricardo Tomasi brought up the visibility:hidden work-around.
Paul Gobée, 23 Dec 2008.
