jQuery ui Accordion degrades in IE6 or IE7, but is working in IE8

Question

There are two accordions on my page, with custom accordion CSS in another file, differentiated by class and ID names so as not to conflict with each other. The accordions don't show up at all, they just degrade to showing all the content at once, as if all the accordion styling is gone. The accordions are both called around the middle of the page, and there's no difference if they are loaded with $(document).ready. What should I check for in the CSS files?

There are no inline-block uses.

I am using jQuery 1.3.2.min and jQuery ui 1.7.2, so I'm assuming the autoHeight set to false won't make a difference... This is being used inside a Symfony-based site.

Works fine in FF, IE8, Chrome. Not so much in IE6, IE7/IE8 compatibility mode.

$(function() {
    $("#accordion").accordion({
        active: false,
        autoHeight: false,
        collapsible: true,
        icons: { 'header': 'ui-icon-carat-1-e', 'headerSelected': 'ui-icon-carat-1-s', }
    });

    $(".links").accordion({
        active: false,
        autoHeight: false,
        collapsible: true,

    });
});

Answer 1

Um, yeah. Comma of death. Removed and works fine.

$(function() {
    $("#accordion").accordion({
        active: false,
        autoHeight: false,
        collapsible: true,
        icons: { 'header': 'ui-icon-carat-1-e', 'headerSelected': 'ui-icon-carat-1-s' }
    });

    $(".links").accordion({
        active: false,
        autoHeight: false,
        collapsible: true

    });
});

Answer 2

Trailing comma of death and Internet Explorer can be a real pain in the **s. You can try and run a regex search through your project using

,\s*?\]|,\s+}

for finding these trailing comma's in your project.

In your case it was the comma right behind "collapsible: true"

    $(".links").accordion({
        active: false,
        autoHeight: false,
        collapsible: true // removed comma

    });