Accordion Content script (v1.6) image disappears in ie6 and ie7

1) Script Title:

Accordion Content script (v1.6)

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem:

Hi everybody, im new on here and use this site for years but I have eventually got stuck and need a little guidance. I use the Accordion Content script (v1.6) to create a very simple show hide effect for a speaker list. the problem i get is that in the hidden div that shows when toggled. I have an image of the speaker floated to the left of text. In FF it works brilliant but in IE6&7 the image flickers and then disappears once the page has loaded. very annoying.

I have googled this issue and I know ie has major issues with floated elements and all you need to do is add position: relative; but this does not seem to work this time and its very annoying. It seems to sort of work in ie6 but when you close the div the image seems to pop up at the top of the page instead. ie7 still makes the image disappear.

The site is here http://www.cpl-expoasia.com/test/conf_speakers.php

Any help on this would be much appreciated.

I'm a little confused- where on the page should I click to test the issue out? Also at a glance I don't see Accordion Menu on the page, but instead, Switch Menu.

Sorry if it seems confusing. I did use the Accordion Content script (v1.7) alternate example click method. http://www.dynamicdrive.com/dynamici...daccordion.htm

But I have moved the page now to http://www.cpl-expoasia.com/test/conf_speakers_old.php

In the middle section of the website. There is a list of names and when you click on a name it will use the accordion script to show their bio and a picture underneath it.

Its when you use ie7 the section opens up underneath the name but the image disappears. All works fine in FF though.

Hope this helps makes things a bit clearer.

I can confirm the issue in IE7 (it works fine in IE8 btw). I'm not sure why at this point, though I suspect it has to do with the formatting of the contents being animated. What happens if you remove the CSS class within the image? Does it still disappear?

Code:

---

div class="thelanguage"><img src="images/speakers/klaus_michael_buecher.jpg" width="100" height="150" class="picture" />

---

Well at least you can see the issue now and im not going mad.

Unfortunately it does the same thing. I thought that it was a float issue so i took off the class="picture" and it still does the same thing.

I have taken off the class from the first two speakers images, Mr Chan and Mr Zhanhong and uploaded the new file so you can see that too.

What is strange though is that in your example on your website, the first link has a picture of a dog floated to the right so it obviously does work with images cross browser, but its not in this case. Weird!

Only problem is that I need it to work cross browser and backward compatible due to people still using ie6 and ie7. Seems to work fine in opera and safari just not ie.

Thanks for looking into this and im sure you like a good challenge :)

I am having the same kind of issue but instead the entire content dissappears!

I am using the Accordian Script in a unqiue way that is controlled via radio buttons to show a specific peice of information within an iFrame.

Ex: http://www.faa-air.com/newdesign/cyc/chart_course1.html

Any ideas? I do not have any problems in Firefox, Chrome, or Safari...ONLY Internet Explorer. I previously had v7 I have now upgraded to v8 and the same problem exists.

Looking for any suggestions as to what could be causing this problem!

Thanks

I forgot to mention that this disappearing act occurs when the IE window is min/maximized or other wise resized as well and sometimes opening a new tab and then returning to the original content.

Sorry...another update...wrong forum...I am using the TabContent Script v2.0 ... help is still appreciated.

I just switched from tables to divs on this page and that fixed it...I never figured out the real source of the problem...I had to find something else that would work even though I am new to the div layouts.

Has anyone been able to resolve this??? I'm having the same exact issue in IE 7 only. Any images or tables inside the expanded content disappear. When you expand the section that contains them, they flicker on the screen momentarily and then they disappear. I'm using ddaccordion v 1.7.1
Any help on this would be greatly appreciated. We have a client deadline coming up and, of course, the client *only* uses IE 7...... :-(

efm, please post a link to the problem page...

Quote:

---

Originally Posted by ddadmin

efm, please post a link to the problem page...

---

1) Script Title:

Accordion Content script (v1.7.1)

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem:

Hi. Any help on this would be greatly appreciated. This script works great in all browsers except IE7 for me. For some reason, any time I have an image or a table inside the content of something expanded, when I expand that content I see the image or table flicker for a second and then it disappears. Oddly enough, sometimes if I go to another tab that I have open in IE and then return to my page the table is there, but then disappears again. I am using the script for a list of FAQs in a <dl> and I'm also using just plain ol divs in another page - same problem on both. I've also tried increasing the z-index on images + tables - but to no avail. You may see my examples here:

(the one in a <dl>):
http://spexcspcom0.web703.discountas...s/careers.html

(the one with normal divs):
http://spexcspcom0.web703.discountas.../chemists.html
(click on "What are the most common phthalates used in plastic products?")

Any help on this would be much appreciated. It's driving me absolutely insane. It's such a great script and works so well otherwise.
Thanks so much for your time.

Hmm the links you've posted have all been trimmed, so they appear broken to me. Can you fix it? Also, do your pages contain a valid doctype at the very top, such as:

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

---

The lack of this is a common source of problem in IE.

1st one should be:
http://spexcspcom0.web703.discountas...s/careers.html

2nd link should be:
http://spexcspcom0.web703.discountas.../chemists.html
(click on "What are the most common phthalates used in plastic products?")

The doctype for both is:

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

---

I tested the "careers.html" page in IE7, and can confirm the issue. After playing around it, the problem seems to be something in your global style for the accordion. If I disable the stylesheet in the HEAD section of the page with comment:

Code:

---

/* Styles For Jobs Accordian */

---

The images appear in IE7 again...

Yes. You're right. It was something in the style I was using on the expanded section (using position relative was messing it up). Thanks so much! I really appreciate your help!!!!!