Accordion Tab Looses Bkgd When Focused?

HTML & CSS
1

Help!! One day it is working fine and the next it starts this…

I’m styling an Spry Accordion in Dreamweaver CS4 (the DW live view is giving strange results but that is a whole different topic).

When I test in Firefox and Safari on Mac the background image I use on the tabs show initially, and then disappear when you are clicking on the accordion. The bkgd images reappear when you click focus off the accordion and onto some other part of the page.

I’m at a loose to where this is occurring. Can someone give me a hint where to look.

Page… http://www.mike.ewing.name/test/pricing.html
Accordion CSS… http://www.mike.ewing.name/test/files/SpryAccordion.css

Other files (probable not where the problem lies)…
Main CSS… http://www.mike.ewing.name/test/files/main.css
Accordion JS… (which is untouched from Adobe Spry) http://www.mike.ewing.name/test/files/SpryAccordion.js

2

Hi,

When looking at it with firebug I can see that the class ‘AccordionFocused’ gets added.
It’s the last selector in the stylesheet that styles the folds.


.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background: url(../images/AccordianTabs.png) no-repeat left 30px;
}
3

thanks. If it were a snake it would have bit me.