Accordion Tab Looses Bkgd When Focused?

[mike60640]

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.htmlMain CSS... http://www.mike.ewing.name/test/files/main.cssAccordion CSS... http://www.mike.ewing.name/test/files/SpryAccordion.cssAccordion JS... (which is untouched from Adobe Spry) http://www.mike.ewing.name/test/files/SpryAccordion.js

[mike60640]

Please... ANY ideas?

[MGmirkin]

Which page are you on, of the site?What specifically are you clicking and what specifically is not showing properly?Everything looks okay on my end... Can't seem to reproduce the issue?I go to the site, navigate to the pricing page. I assume that's the one you're on about.When I click on either the menu items of the minimizable tabs in the middle of the page, it seems to work fine. None of the background images "disappear."When I hover over the top menu items, the image changes to the somewhat inverted gradient image. Clicking and holding doesn't change anything. On releasing and leaving the menu with the cursor, the image returns to the normal menu bar. Likewise with the collapsible pricing menu. I can click and hold any of the 3 options, and the image does not change or disappear. Once I let go of the mouse button, the text decompresses below the option (or compresses/hides if it was already open). At no point does the option's image "disappear" while clicking and holding, nor before, nor after. Clicking in the decompressed text or outside of the options altogether does not change the appearance of the page in any way.Maybe it's something specific to your setup? I'm on Ubuntu 9.04 using Firefox 3.5 (Shiretoko). Have you tried it on other machines with different OS / browser combinations?I'm kind of a newbie to CSS and definitely don't know javascript, though I was able to follow some of it (having once upon a time learned a smidge of Java; a smidge being the equivalent of about a semester or two; honestly didn't learn all that much, aside from how to display "Hello World" ;o] That and the professor liked to call he overhead projector with plastic rolls the "Wayback Machine" when scrolling back to a previous point in the lecture to answer a question. *Shrug*). So, yeah, can't debug too much more than that. I did notice that the main.css file (hope you don't mind I browsed your source) has the following style:

ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focus{ color: #FFF; background: url(none);}

One of the few places I noticed a background image set to nothing when something had :focus. I don't think it's related to the accordion menu though. Seems more concerned with the top menu bar?Maybe check that nothing else sets the background image property to (none) when :focus is true with respect to anything that might impact the accordion menu items or tabs? Just a thought. Seems like maybe something somewhere is by accident?That's about all I've got. Sorry I'm not more help.Best,~MG