Focus, Browsers & Spry Accordion

[Guest]

I'm using the Spry Accordion (and like it a lot), but I've observed a minor unwanted effect:
In some browsers (FF and Chrome) there is a frame appearing around the widget when it is focussed.
In Chrome, it's a sort of gold rectangle and is actually quite pretty in the context of the page,
but Firefox uses a dotted rectangle which gets clipped on one edge by the nesting of objects and looks sloppy & unattractive.
Does anyone know how I might affect this focus characteristic?
I've changed as many CSS characteristics as I could identify to make the accordion blend into the text, but none of them seem to have an impact on this focus-indicator.

ThxEnAvance,
F/C

[Newsgroup_User]

Frank,

Take a look at the AccordionFocused class. You might try adding this
property:

border:none;

HTH,
Randy

> I'm using the Spry Accordion (and like it a lot), but I've observed a minor
> unwanted effect:
> In some browsers (FF and Chrome) there is a frame appearing around the widget
> when it is focussed.
> In Chrome, it's a sort of gold rectangle and is actually quite pretty in the
> context of the page,
> but Firefox uses a dotted rectangle which gets clipped on one edge by the
> nesting of objects and looks sloppy & unattractive.
> Does anyone know how I might affect this focus characteristic?
> I've changed as many CSS characteristics as I could identify to make the
> accordion blend into the text, but none of them seem to have an impact on this
> focus-indicator.

[Guest]

Thanks Randy,

That property removes the frame in Chrome, but doesn't change the effect in Firefox.
Any MozzaGurus out there?

ThxAgain,
F/C

[Newsgroup_User · Accepted solution]

CORDFrank wrote:
> Oh browers...
> That property removes the frame in Chrome, but doesn't change the effect in Firefox.
> Any MozzaGurus out there?

Add to the .Accordion class:
outline:none;

For me this solves the issue in both Firefox 3 and in Chrome without the need to change the border attribute on the AccordionFocused class.



--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

[Newsgroup_User]

"CORDFrank" <webforumsuser@macromedia.com> wrote in message
news:gk2e1l$sbj$1@forums.macromedia.com...
> I'm using the Spry Accordion (and like it a lot), but I've observed a
> minor
> unwanted effect:
> In some browsers (FF and Chrome) there is a frame appearing around the
> widget
> when it is focussed.
> In Chrome, it's a sort of gold rectangle and is actually quite pretty in
> the
> context of the page,
> but Firefox uses a dotted rectangle which gets clipped on one edge by the
> nesting of objects and looks sloppy & unattractive.
> Does anyone know how I might affect this focus characteristic?
> I've changed as many CSS characteristics as I could identify to make the
> accordion blend into the text, but none of them seem to have an impact on
> this
> focus-indicator.

Last I looked at spry accordions, it was using tabindex on the triggers in
lieu of a real <a> tag. If you want the Accordion accessible to keyboard
users do not alter the browser's default outline - it is an accessibility
feature. If you want to normalize the spry accordion, either remove tabindex
attributes or see if someone from Adobe can tell you how to make the
triggers real links.


--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System

[Guest]

Thanks to all.
I have to say, this is the most effective forum I've ever used!

[Newsgroup_User]

> Add to the .Accordion class:
> outline:none;

Doh! I meant "outline" :)

Randy