10 replies [Last post]
Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

Is that a funky title or what

It's about Firefox (2.0 here, but I expect every FF version has it). When you click an anchor there's a 1px dotted border around the anchor. Generally this is nice. However, my layouts are pixel-precise, causing this 1px border to sometimes create an overflow resulting in a scrollbar for just a sec. Easy to fix with overflow: hidden;, yes. but I need overflow: auto; this time, so that is not going to work.

Is there a way to disable this with CSS?

As a rule, I never touch anything more sophisticated and delicate than myself

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I thought the border was

I thought the border was rendered over the page and thus does not cause the effect. Can you provide a url?

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

It practically doesn't.

It practically doesn't. elements don't move, so that's fine. however, the 600px wide anchor for example within a 600px wide div element, causes an overflow of 2px when active. I can't provide an example since it's behind a login.

As a rule, I never touch anything more sophisticated and delicate than myself

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Are you sure you don't have

Are you sure you don't have an active psuedo class that adds border, or padding, or width?

Can you post the html/css?

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

it's default even set

it's default Smile
even set a:active { border: 0px solid #ccc; } but is not fixing it.

I'll create a dummy html. Hold on.

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

here's an

here's an example:

http://www.envious.nl/anchor.php

(mind the x on top of the page, it's the anchor. click it)

As a rule, I never touch anything more sophisticated and delicate than myself

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Bug 286368

This is a bug, as I read the specs. See Bugzilla #286368; others think so, too. Smile

Try adding 1px padding to the container, or 1px margin to the link.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

I see.. going on for quite

I see.. going on for quite some time now. That's the 2nd bug I found in a mozilla product which hasn't been fixed for years Smile

I have set margin to 1px on the anchor, which works, but of course changes my layout 1px. Not much choice I guess..

I noticed IE doesn't have this border when active. I wonder why they don't just leave it out

As a rule, I never touch anything more sophisticated and delicate than myself

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I believe it is there for

I believe it is there for accessibility for those who cannot use a mouse and have to use the tab instead. This way they can see which link is active.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 13 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

ClevaTreva wrote:I believe

ClevaTreva wrote:
I believe it is there for accessibility for those who cannot use a mouse and have to use the tab instead. This way they can see which link is active.

Yep ... It's not a bug. It's an accessibility feature.

You *can* remove it by putting outline: 0; in your CSS but I would strongly advise against that for accessibility issues of course.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The outline is actually on

The outline is actually on the :focus pseudo class. IE does not support :focus. It may seem like it's on :active, but that's only because once clicked on, it automagically has focus. You may remove the outline by adding

a:focus {outline: none;}

As CT and karinne suggest, this is an accessibility issue and if you remove the outline, you should replace it with an equally explicit device; something like

a:focus {background-color: yellow;}

If you specify the :focus, the desired order of precedence is
:link
:visited
:focus
:hover
:active

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.