no decoration on focus

[Safran von Twesla]

Hi,

I'm trying to have a link without any text-decoration or border.
I tried the css-argument a:focus, but I still get some dashed border.

<a class = 'class1' href = 'link.html'>Here</a>

and in css-file:
[...]
a.class1:focus {
text-decoration:none;
border-style:none;
}

Thanks for help...

SvT

 

[Craig L]

Try adding:

<style>
a{text-decoration:none}
</style>

in the top of the page.

Craig

(e-mail address removed) (delete SPAM before emailing)

 

[DU]

Hi,

I'm trying to have a link without any text-decoration or border.
I tried the css-argument a:focus, but I still get some dashed border.

<a class = 'class1' href = 'link.html'>Here</a>

and in css-file:
[...]
a.class1:focus {
text-decoration:none;
border-style:none;
}

Thanks for help...

SvT

These dotted (I assumed you meant dotted) lines are useful as they
indicate to the user the last active or selected element in a page or
the element which currently has the focus. Removing them generally annoy
users, disorient users or confuse users. Removing visual feedback of
focused elements diminishes usability of a page.

DU

 

[Toby A Inkster]

I'm trying to have a link without any text-decoration or border.
I tried the css-argument a:focus, but I still get some dashed border.

The dotted line around focused links isn't border: it's outline. It can't
be controlled through CSS 2, although I believe CSS 2.1 allows some
control over it, although no browsers fully support CSS 2.1 yet. (Opera 7
is close.)

 

[Leif K-Brooks]

The dotted line around focused links isn't border: it's outline. It can't
be controlled through CSS 2, although I believe CSS 2.1 allows some
control over it, although no browsers fully support CSS 2.1 yet. (Opera 7
is close.)

CSS 2 has outlines.

 

[DU]

Safran von Twesla wrote:




The dotted line around focused links isn't border: it's outline. It can't
be controlled through CSS 2, although I believe CSS 2.1 allows some
control over it, although no browsers fully support CSS 2.1 yet. (Opera 7
is close.)

<element hidefocus="true">
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hidefocus.asp

In the user.js file of most Mozilla-based browsers:
user_pref("browser.display.focus_ring_on_anything", false);

*:focus, *:active {-moz-outline:0px none red; outline:0px none red;}

are 3 ways (working in respective browser families) that should remove
such dotted lines.

There are ways to remove outline. It should be stressed and underlined
that doing so is not recommendable, is counter-usability, goes against
widely accepted and established accessibility guidelines and goes
against good common sense.

DU

 

[Safran von Twesla]

<element hidefocus="true">
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hidefocus.asp

In the user.js file of most Mozilla-based browsers:
user_pref("browser.display.focus_ring_on_anything", false);

*:focus, *:active {-moz-outline:0px none red; outline:0px none red;}

are 3 ways (working in respective browser families) that should remove
such dotted lines.

Thanks, I've never heard of them. Couldn't find them in selfHTML
neither..

There are ways to remove outline. It should be stressed and underlined
that doing so is not recommendable, is counter-usability, goes against
widely accepted and established accessibility guidelines and goes
against good common sense.

Well, I make the fields appear in a different color, these dotted
lines are not very pretty...


SvT

 

[Eric Bohlman]

Well, I make the fields appear in a different color, these dotted
lines are not very pretty...

Making the fields appear in a different color doesn't do much to help
someone navigate the page with their keyboard, which is what the focus
rectangle is intended to support. Keep in mind that there are going to be
more keyboard navigators than you might expect, simply because laptop
pointing devices are more awkward to use than desktop ones (for example,
they typically require a steadier hand), so some people who would use a
mouse for navigation on a desktop might prefer the keyboard on a laptop.

 

[rf]

Hi,

I'm trying to have a link without any text-decoration or border.
I tried the css-argument a:focus, but I still get some dashed border.

If you are talking about the focus rectangle then do not remove it(*). The
focus rectangle is *required* for anybody that uses a keyboard for
navigation.

(*) The only way to remove the focus rectangle is with some javascript.

Cheers
Richard.

 

[Toby A Inkster]

CSS 2 has outlines.

Right you are. Hmmm... I wonder why Mozilla implements "-moz-outline"
instead of "outline" then. The "-moz-" prefix is usually only reserved for
experimental CSS 2.1/CSS 3 features.

 

[DU]

Leif K-Brooks wrote:




Right you are. Hmmm... I wonder why Mozilla implements "-moz-outline"
instead of "outline" then. The "-moz-" prefix is usually only reserved for
experimental CSS 2.1/CSS 3 features.

In part because it is not doing the same. Opera 7.x's support for
outline is CSS2 compliant; Mozilla's support for -moz-outline is not
compliant with CSS2. The outline borders are inside the borders, around
the content when it should be outside the borders.

http://www.meyerweb.com/eric/css/tests/css2/sec18-04a.htm
http://www.meyerweb.com/eric/css/tests/css2/sec18-04b.htm
http://www.meyerweb.com/eric/css/tests/css2/sec18-04c.htm
http://www.meyerweb.com/eric/css/tests/css2/sec18-04d.htm

http://bugzilla.mozilla.org/show_bug.cgi?id=6647#c9

"seems like the current -moz-outline is rendered inside the border but
the web standards outline property should be rendered over the border."
http://bugzilla.mozilla.org/show_bug.cgi?id=6647#c22

DU

 

[delerious]

Making the fields appear in a different color doesn't do much to help
someone navigate the page with their keyboard, which is what the focus
rectangle is intended to support. Keep in mind that there are going to be
more keyboard navigators than you might expect, simply because laptop
pointing devices are more awkward to use than desktop ones (for example,
they typically require a steadier hand), so some people who would use a
mouse for navigation on a desktop might prefer the keyboard on a laptop.

For my navigation menu, I call blur() in each of the anchors' onmouseout()
methods. That way if a user wants to use the keyboard, then the focus
rectangle will not be removed.