Mootools Accordion bug in IE

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.

If anyone has any suggestions on how to correct this buggy behavior, I’d be much obliged.

6 Responses to “Mootools Accordion bug in IE”

  1. 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

  2. sam says:

    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.

  3. ejay says:

    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…

  4. Fawks says:

    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.

  5. cyborat says:

    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! =)

  6. Guillaume says:

    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

The comment form requires JavaScript. Please enable JavaScript to submit a comment.