Glossy Accordion Menu - icon issue in Safari

[superhans]

1) Script Title:

Glossy Accordion Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

3) Describe problem:

Using Safari, look at the blue example menu near the top.

Click on the 'CSS Examples' menu link about 10 times.

You will see the + icon on the 'CSS Drive' menu item below starts to move downwards.

Icons can also go out of position when using the ddaccordion.expandall() / ddaccordion.collapseall() features.

Many thanks
superhans

[ddadmin]

This looks to be more of a CSS bug in Safari rather than bug in the accordion script. As far as the icon portion is concerned, all the script is doing is replacing one <img> tag with another inside the header. The fact that the image is absolutely positioned seems to cause the issue you see.

I played around a bit, and it seems if you wrap each image icon in a SPAN that's absolutely positioned, the issue goes away:


animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<span class='statusicon'><img src='plus.gif'/></span>", "<span class='statusicon'><img src='minus.gif' /></span>"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)

[superhans]

Perfect, that solved the issue.

Thank you so much !