Spry Vertical Menu, Firefox, Focus Indication Problem

[nbreslow]

Hi All,

I am using Dreamweaver CS4 to create a portfolio site for my work and ran into
a problem when testing my Vertical Spry Navigation Menu out in Firefox.

If I click on a navigation element a red dotted frame appears around the
element and ruins the look/feel of the site.
[url]http://www.nicholasbreslow.com/sample1/[/url] is a link to the problem (problem
occurs by clicking, not just hovering).

The little 'lock' image icon I have as the last element in the menu has been
strangely affected as well. That seems to have not only the red dotted frame
but a black frame around the image. I am not sure what could be causing this
but it might be unrelated to the red dotted frame. Can you put images in a
Spry Menu?

I have done some research here and this might be caused by keyboard tab focus
issues with Firefox? It works fine in Safari and I haven't tested in IE yet.
I am really new to this and hope someone here can help me. Thank you in
advance!

PS - If you can detailed instructions would be a real help. I am new to this
and have basic CSS/HTML skills and no Javascript skills at all.

Sincerely,

-Nick Breslow

[danilocelic AdobeCommunityExpert]

nbreslow wrote:

> Hi All,
>
> I am using Dreamweaver CS4 to create a portfolio site for my work and ran into
> a problem when testing my Vertical Spry Navigation Menu out in Firefox.
>
> If I click on a navigation element a red dotted frame appears around the
> element and ruins the look/feel of the site.
> [url]http://www.nicholasbreslow.com/sample1/[/url] is a link to the problem (problem
> occurs by clicking, not just hovering).

For me in Firefox 3 it occurs when hovering over your menu items.

>
> The little 'lock' image icon I have as the last element in the menu has been
> strangely affected as well. That seems to have not only the red dotted frame
> but a black frame around the image. I am not sure what could be causing this
> but it might be unrelated to the red dotted frame. Can you put images in a
> Spry Menu?

The issue you're seeing is an accessibility feature called an outline, and is present to give folks that are using their keyboards an indication of where they are at when they are tabbing around the page. Removing it will remove any benefit those to those users, and will make your page less accessible. You should be able to remove it by setting the outline property of your menu items to outline:none. Using something similar to the following in your CSS:
ul.MenuBarVertical a {outline: none;}

Images when linked by default have a border around them, you can turn off that border by specifically setting border to none either directly on the img tag with border="0" or in the style sheet:
ul.MenuBarVertical a img{ border: none;}

> PS - If you can detailed instructions would be a real help. I am new to this
> and have basic CSS/HTML skills and no Javascript skills at all.

Also, you should ask Spry related questions in the Spry forum:
[url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602[/url]



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