E-mail List Archives
Thread: Firefox vs. IE - dotted outline to show element in focus
Number of posts in this thread: 7 (In chronological order)
From: Amanda Nance
Date: Wed, Sep 29 2010 11:03AM
Subject: Firefox vs. IE - dotted outline to show element in focus
No previous message | Next message →
Hi all,
I am doing accessibility testing, but I'm not a developer. We have a
navigation bar with tabs... When focus is on a tab, I see the dotted outline
in IE but not in Firefox. Is there an easy way to code it so that the
outline appears in both browsers? Here is how it's currently coded:
<li><a href="">Name of tab<br/><span>Subname of tab</span></a></li>
Thanks!
From: Steve Green
Date: Wed, Sep 29 2010 11:18AM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | Next message →
The problem will be that the 'outline' styles are set to 'none' or '0' in
your stylesheet. New browsers such as Firefox honour this rule and do not
display the outline. Older browsers do not honour the rule so they display
the outline.
We see this problem on almost every website that we test, and it is because
developers use Eric Meyer's reset stylesheet, which sets the 'outline'
properties to 'none' or '0' as appropriate. The reset stylesheet includes a
warning that you must set your own values for these properties, but almost
no one does.
You should either set values for the 'outline' properties or delete those
rules from the stylesheet.
Steve Green
Director
Test Partners Ltd
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Amanda Nance
Sent: 29 September 2010 17:59
To: WebAIM Discussion List
Subject: [WebAIM] Firefox vs. IE - dotted outline to show element in focus
Hi all,
I am doing accessibility testing, but I'm not a developer. We have a
navigation bar with tabs... When focus is on a tab, I see the dotted outline
in IE but not in Firefox. Is there an easy way to code it so that the
outline appears in both browsers? Here is how it's currently coded:
<li><a href="">Name of tab<br/><span>Subname of tab</span></a></li>
Thanks!
From: Amanda Nance
Date: Wed, Sep 29 2010 11:24AM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | Next message →
Jukka, I can't post the URL because it's only available inside our network.
I see that the <LI> has "outline-style: none". I'm assuming that's what
Steve is referring to.
Thanks Steve!
On Wed, Sep 29, 2010 at 1:13 PM, Steve Green < = EMAIL ADDRESS REMOVED = >wrote:
> The problem will be that the 'outline' styles are set to 'none' or '0' in
> your stylesheet. New browsers such as Firefox honour this rule and do not
> display the outline. Older browsers do not honour the rule so they display
> the outline.
>
> We see this problem on almost every website that we test, and it is because
> developers use Eric Meyer's reset stylesheet, which sets the 'outline'
> properties to 'none' or '0' as appropriate. The reset stylesheet includes a
> warning that you must set your own values for these properties, but almost
> no one does.
>
> You should either set values for the 'outline' properties or delete those
> rules from the stylesheet.
>
> Steve Green
> Director
> Test Partners Ltd
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Amanda Nance
> Sent: 29 September 2010 17:59
> To: WebAIM Discussion List
> Subject: [WebAIM] Firefox vs. IE - dotted outline to show element in focus
>
> Hi all,
> I am doing accessibility testing, but I'm not a developer. We have a
> navigation bar with tabs... When focus is on a tab, I see the dotted
> outline
> in IE but not in Firefox. Is there an easy way to code it so that the
> outline appears in both browsers? Here is how it's currently coded:
>
> <li><a href="">Name of tab<br/><span>Subname of tab</span></a></li>
>
> Thanks!
>
From: Jukka K. Korpela
Date: Wed, Sep 29 2010 11:30AM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | Next message →
Amanda Nance wrote:
> When focus is on a tab, I see the dotted
> outline in IE but not in Firefox.
Normally both IE and Firefox show a dotted outline for a focused element.
> Here is how it's currently coded:
>
> <li><a href="">Name of tab<br/><span>Subname of tab</span></a></li>
That's just a fragment of HTML code and probably irrelevent to the issue.
The relevant code is probably the CSS code for the page.
Just post the URL, mm'kay?
--
Yucca, http://www.cs.tut.fi/~jkorpela/
From: William Lawrence
Date: Tue, Oct 12 2010 9:27AM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | Next message →
Amanda,
> I see that the <LI> has "outline-style: none". I'm assuming that's what
> Steve is referring to.
In the CSS of the site, it is best to add a :focus pseudo-class
selector to any declaration that is already specifying the :hover
pseudo-class selector. For example, if the scope of the design
specifies the following CSS:
a:hover { background-color: #000; color: #fff; text-decoration: underline; }
The add the :focus pseudo-class selector as such:
a:focus, a:hover { background-color: #000; color: #fff;
text-decoration: underline; }
OR
a:focus { background-color: #fff; color: #000; outline:1px solid #000 }
a:hover { background-color: #000; color: #fff; text-decoration: underline; }
OR
The opportunities for controlling the presentation of your focus
management are endless.
There are different ways in which it may be written and ordered in the
CSS which you're working, however don't be afraid to specify :focus
for every focusable element. It is in the :focus pseudo-class selector
that you will be able to control the presentation of the outline of
the links in your "tab bar" navigation.
For further reading, an esteemed member of this list wrote a bit about
it awhile back:
http://24ways.org/2009/dont-lose-your-focus
There are other resources as well: http://www.delicious.com/tag/focus+css
Cheers!
William
From: steven
Date: Tue, Oct 12 2010 10:12AM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | Next message →
Don't forget to use :active for aged IE browsers which don't understand
:focus
Steven
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of William Lawrence
Sent: 12 October 2010 16:26
To: WebAIM Discussion List
Subject: Re: [WebAIM] Firefox vs. IE - dotted outline to show element in
focus
Amanda,
> I see that the <LI> has "outline-style: none". I'm assuming that's what
> Steve is referring to.
In the CSS of the site, it is best to add a :focus pseudo-class
selector to any declaration that is already specifying the :hover
pseudo-class selector. For example, if the scope of the design
specifies the following CSS:
a:hover { background-color: #000; color: #fff; text-decoration: underline; }
The add the :focus pseudo-class selector as such:
a:focus, a:hover { background-color: #000; color: #fff;
text-decoration: underline; }
OR
a:focus { background-color: #fff; color: #000; outline:1px solid #000 }
a:hover { background-color: #000; color: #fff; text-decoration: underline; }
OR
The opportunities for controlling the presentation of your focus
management are endless.
There are different ways in which it may be written and ordered in the
CSS which you're working, however don't be afraid to specify :focus
for every focusable element. It is in the :focus pseudo-class selector
that you will be able to control the presentation of the outline of
the links in your "tab bar" navigation.
For further reading, an esteemed member of this list wrote a bit about
it awhile back:
http://24ways.org/2009/dont-lose-your-focus
There are other resources as well: http://www.delicious.com/tag/focus+css
Cheers!
William
From: Amanda Nance
Date: Fri, Oct 15 2010 2:39PM
Subject: Re: Firefox vs. IE - dotted outline to show element in focus
← Previous message | No next message
Thanks William and everyone. I showed this email thread to a developer who
got it all working properly.
-Amanda
On Tue, Oct 12, 2010 at 11:25 AM, William Lawrence < = EMAIL ADDRESS REMOVED = >wrote:
> Amanda,
>
> > I see that the <LI> has "outline-style: none". I'm assuming that's what
> > Steve is referring to.
>
> In the CSS of the site, it is best to add a :focus pseudo-class
> selector to any declaration that is already specifying the :hover
> pseudo-class selector. For example, if the scope of the design
> specifies the following CSS:
>
> a:hover { background-color: #000; color: #fff; text-decoration: underline;
> }
>
> The add the :focus pseudo-class selector as such:
>
> a:focus, a:hover { background-color: #000; color: #fff;
> text-decoration: underline; }
>
> OR
>
> a:focus { background-color: #fff; color: #000; outline:1px solid #000 }
> a:hover { background-color: #000; color: #fff; text-decoration: underline;
> }
>
> OR
>
> The opportunities for controlling the presentation of your focus
> management are endless.
>
> There are different ways in which it may be written and ordered in the
> CSS which you're working, however don't be afraid to specify :focus
> for every focusable element. It is in the :focus pseudo-class selector
> that you will be able to control the presentation of the outline of
> the links in your "tab bar" navigation.
>
> For further reading, an esteemed member of this list wrote a bit about
> it awhile back:
> http://24ways.org/2009/dont-lose-your-focus
>
> There are other resources as well: http://www.delicious.com/tag/focus+css
>
> Cheers!
> William
>