I’ve happened across an apparent bug in the way Internet Explorer renders the Mootools Accordion javascript when inside a table. Specifically, I’m trying to use the Accordion to show and hide a new table row. I’ve put the stretcher div inside a td cell, which opens and closes correctly in Firefox, but exhibits two distinct problems in IE 6 and 7. For one, the action should be smooth, but is bouncy and jerky. For another, after the div collapses, it springs open a few pixels and remains that way, impacting the consistency of the table layout.
I’ve put together a simple demonstration page to illustrate this bug.
If anyone has any suggestions on how to correct this buggy behavior, I’d be much obliged.
Hello,
I believe the IE bug related to your demo page is the “Empty element bug”.
Examine this page:
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Empty+Elements
I wish to indicate that you are misusing semantically table in that demo. Table should be for presenting tabular data, not for page layout or for formating (positioning).
Regards,
Gérard Talbot
You often run into problems with hiding a number of rows in a table with the mootools accordion. The way around it is to group the rows into tbody’s rather than div’s and then turn the display of those tbody’s on and off. in my experience.
hope that helps.
id like to contribute… ive been crazzzy doing fixing this
table bug… wherein…
it does not totally display the accordion on
IE, wherein, it leave the height of the invisible
accordion contetnts to be visible in
a big white box….
so what i have found out was that
the html tag and the doctype must be in
xmlns…
not an ordinary tag…
add this so that the page is not
in quirky mode…
I have dealt with this issue successfully by setting the line-height of the toggle-able element to zero and having a div within that reverts the line-height back. A small gap remains, but it is tolerable.
ejay,
Man I wanted to thank you! I had forgotten to put my doctype and xmlns stuff in place – I intended to get it put in there, but got to coding away and forgot, and well, after reading your reply, I looked, and sure enough, I hadn’t remembered to go back and put those tags in place.
A million thanks! =)
Hi,
I’ve the same problem but I don’t manage to solve it :
– http://glefebvre76.free.fr/test_accordion2.php : The problem doesn’t exist on this page which doesn’t use table
– http://glefebvre76.free.fr/test_accordion.php : The problem exists on this page which uses table
What can I do in order to Accordion works with Table ?
Thanks to help me