View Full Version : Animated Collapsible DIV - IE6 Animation

08-19-2008, 07:02 PM
1) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: The open/close animation doesn't work in IE6. The DIVs are shown/hidden without cropping nor fading. All works fine in Safari and Firefox. I tried changing the HTML header, but then other glitches appear (flickering).

The page is here: http://www.artforumvzw.be/cgi-bin/a.cgi?a=0

Would appreciate any help.

08-19-2008, 07:57 PM
Keep in mind that IE 6 is an old browser, and new scripts tend to not work in. Try using jQuery (http://jquery.com/), heres a special functions for a accordion slider: http://docs.jquery.com/UI/Accordion Just modify it up a bit, and Boom. :)

08-19-2008, 09:44 PM
The demo page works fine in IE6 though... so must be something wrong with my code :(

08-19-2008, 09:55 PM
See if the jQuery one works in IE 6, if it does. Give it a shot. Also if you really, really don't want to switch, double check the code very carefully, make sure your not leaving anything essential out that may cause problems.

08-19-2008, 10:23 PM
I've viewed your page in IE6 and IE7- the script does work in general as far as I can see in those browsers. If you're talking about how the sub menus seem to not collapse in real time in IE, that's most likely due to the CSS on your page. For example, looking at the class that styles the sub menu contents:

.Pijltje {
position: absolute;
background-image: url(../Images/Projects/Projectlevel/Algemeen/Pijltje.gif);
width: 21px;
height: 15px;
right: -26px;
top: 0px;
display: none;

I can see how that may throw IE off, as you're absolutely positioning these menu items, which causes them to not return their actual height for jQuery to expand/ collapse them correctly. In summary, I'd try and tweak your CSS, perhaps starting out fresh with one of the accordion menus here (http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm) instead.

08-19-2008, 11:17 PM
Thanks for your feedback! I think I found the error: the "position: relative" statement in the "li" tag was causing the problem... looks like it's working fine now: