DDAccordion on IE - content div "disappearing" when opened

[sheena_mc]

1) Script Title: DD Accordion

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

3) Describe problem: http://www.sheenamcnally.com/index2.html

I designed and set up this portfolio website using the Accordion script on a Mac - so I was looking at it in FireFox and Safari the whole time. Looked great, everything seemed to be working just fine.

I went and tested it on a PC recently (on IE7) and holy crap - problems. The menu content divs (class "menuContent") will display... but once they open, you see them for a second, and they disappear.

Have spent far too much time trying to diagnose the problem this weekend (a lot of guess + test), with minimal luck. I notice if I remove all inline styles and all classes from whatever I have inside of the content div (tables, more divs, spans, etc) - and have basically plain text, THEN, it will work. But if I try to add a class or any kind of style to anything inside the content div, it's a no go. Even something as simple as having a table with a bgcolor specified the old-school way (bgcolor="#ffffff" for example), it makes it so that the content disappears.

I'm using Lightbox as well, so I implemented a fix I found on this forum where you change $ to $j in the accordion script (and add an extra line at the top) in case there was a conflict, but still no go.

Any help would be awesome - not sure what I've done wrong and I'm stumped right now. Thanks.

[ddadmin]

I've been testing your page locally. So far it seems only by disabling the lightbox script does the menu no longer behave strangely in IE. That is, removing this code on your page:


<!-- lightbox -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Can you first confirm this, by removing the above, and seeing if you get the same result as me?

[sheena_mc]

Hi, thanks a lot for looking into this.

I've uploaded a new file with the lightbox scripts in the header section removed, located at http://www.sheenamcnally.com/index3.html - however, when I test it (IE 7), I am still seeing the same bizarre results as before.

No change in FireFox and Safari (except for the lightbox not working, of course!).

Apart from removing all styles of any kind (inline, classes, ids) as well as things like td bgcolor (and basically anything that specifies... well, anything!) from my content divs and putting in just PLAIN, non-formatted text, I haven't been able to get it to behave properly in IE yet... totally bizarre... and not sure why this would make it so erratic in IE!

[ddadmin]

Ok, your new page does work in IE8 now, though in IE7, you're right, it's still exhibiting the same behavior. I think I may have solved that problem as well, however. Inside each of your DIV containers for the contents themselves, for example:


<div class="menuContent" style="position: relative; clear: both;">

Remove the code in red. That seems to do the trick. I'm not sure why you relatively positioned those DIVs, which seem unnecessary.

[sheena_mc]

Thanks for the feedback - theoretically there must have been a reason I positioned them relative and used the clear, but perhaps I am just losing my mind :p

I will update the files with the suggestions provided and test again in IE as soon as I can borrow a non-Mac work laptop again... I'll let you know the results!

[sheena_mc]

I have had a chance to test it on IE 7 again, and this does resolve the issue, as far as I can tell. I notice I have a few other niggling things to fix with the CSS and my layout, but that is no biggie.

Thanks for all the great help! Any way I can show my thanks?

[ddadmin]

You're welcome, glad the main issue is fixed for you. And you just showed your thanks already- that's more than enough. :)