Focus, Browsers & Spry Accordion

[CORDFrank]

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

[Randy Edmunds]

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.

[CORDFrank]

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

Thx,
F/C

[danilocelic AdobeCommunityExpert]

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
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert

[Al Sparber - PVII]

"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
[url]http://www.projectseven.com[/url]
The Finest Dreamweaver Menus | Galleries | Widgets
[url]http://www.projectseven.com/go/pop[/url]
The Ultimate DW Menu System

[CORDFrank]

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

[Randy Edmunds]

> Add to the .Accordion class:

> outline:none;

Doh! I meant "outline" :)

Randy

[Unregistered]

great that this works a treat with all of the spry effects menu effects

[Unregistered]

outline: none; -- you just MADE my day! I've been looking for a fix to the annoying outline.

Thanks!

CORDFrank wrote:

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
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert