no decoration on focus

Discussion in 'HTML' started by Safran von Twesla, Jan 3, 2004.

  1. 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
    Safran von Twesla, Jan 3, 2004
    #1
    1. Advertising

  2. Safran von Twesla

    Craig L Guest

    Try adding:

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

    in the top of the page.

    Craig

    (delete SPAM before emailing)
    "Safran von Twesla" <> wrote in message
    news:...
    > 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, Jan 3, 2004
    #2
    1. Advertising

  3. Safran von Twesla

    DU Guest

    Safran von Twesla wrote:

    > 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
    DU, Jan 3, 2004
    #3
  4. Safran von Twesla wrote:

    > 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.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Jan 3, 2004
    #4
  5. Toby A Inkster 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.)


    CSS 2 has outlines.
    Leif K-Brooks, Jan 4, 2004
    #5
  6. Safran von Twesla

    DU Guest

    Toby A Inkster wrote:

    > Safran von Twesla wrote:
    >
    >
    >>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.)
    >


    <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
    DU, Jan 4, 2004
    #6
  7. On Sat, 03 Jan 2004 19:48:52 -0500, DU
    <> wrote:

    ><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
    Safran von Twesla, Jan 4, 2004
    #7
  8. Safran von Twesla

    Eric Bohlman Guest

    Safran von Twesla <> wrote in
    news::

    >>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...


    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.
    Eric Bohlman, Jan 4, 2004
    #8
  9. Safran von Twesla

    rf Guest

    "Safran von Twesla" <> wrote in message
    news:...
    > 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.
    rf, Jan 4, 2004
    #9
  10. Leif K-Brooks wrote:

    > Toby A Inkster 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.)

    >
    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Jan 4, 2004
    #10
  11. Safran von Twesla

    DU Guest

    Toby A Inkster wrote:

    > Leif K-Brooks wrote:
    >
    >
    >>Toby A Inkster 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.)

    >>
    >>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.
    >


    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
    DU, Jan 4, 2004
    #11
  12. Safran von Twesla

    Guest

    On 4 Jan 2004 01:56:00 GMT, Eric Bohlman <> wrote:
    >>>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...

    >
    >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.
    , Jan 5, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    {text-decoration: none} Broken

    Paul Furman, Feb 14, 2004, in forum: HTML
    Replies:
    11
    Views:
    756
    Mark Parnell
    Feb 15, 2004
  2. Desmond

    Text decoration

    Desmond, Aug 25, 2004, in forum: HTML
    Replies:
    21
    Views:
    938
  3. Bern

    name decoration

    Bern, Aug 8, 2004, in forum: C++
    Replies:
    8
    Views:
    1,338
    Ron Natalie
    Aug 8, 2004
  4. Sean Ross

    Set, Mark, and Apply Decoration

    Sean Ross, Aug 12, 2004, in forum: Python
    Replies:
    0
    Views:
    315
    Sean Ross
    Aug 12, 2004
  5. Roger
    Replies:
    3
    Views:
    299
Loading...

Share This Page