That Annoying Firefox "Selection Border"

One Pixel Too Far

[cmarshall]

I have a page that fills an entire screen.

It is carefully sized to fill the screen without triggering scrollbars. It will resize, no problem. No scrollbars.

I have an anchorized image in the upper right corner (the "Home" link).

In Firefox, clicking on this link creates a momentary 1-pixel "dot border" around it. This is fairly standard for FF.

However, it is quite annoying, because it triggers scrollbars. You see the screen shift just before the home page is brought up.

Is there some CSS way to disable this? I already have border:none for the <img>, but that does not affect this.

[Marshall]

Try adding border-width: 0px; Or img a:active {border:none;border-width:0px;} Just a suggestion.

Another thought is img a:active {size image down 2px}. If your image is say 150x150, on a:active, have it size down to 148x148. It should not be that noticable.

Marshall

[edit](Let me know if it works.)[/edit]

[edited by: Marshall at 12:50 pm (utc) on Sep. 6, 2007]

[cmarshall]

I cheated a little. I took your second suggestion, and that worked.

I downed the size by one pixel, and that seems to have prevented the scrollbars. I'll have to test this out with different browsers and see how it works.

If you want, I can SM you the link to the site, and you can see what I mean.

[penders]

I think what you may be seeing is the focus outline when the control gets... focus. Although according to the spec it shouldn't take up any space, appearing on top of the control. Normally you don't want to get rid of this as it forms a visual que for those using the keyboard.

Check out the following CSS properties:
outline (shorthand), outline-width, outline-style, outline-color
[w3.org...]

eg.

outline:0;

[Marshall]

Sure.

Marshall

[cmarshall]

I think what you may be seeing is the focus outline when the control gets... focus. Although according to the spec it shouldn't take up any space, appearing on top of the control. Normally you don't want to get rid of this as it forms a visual que for those using the keyboard.

That's exactly what it is, and you are correct. I don't want to hide it.

Necking in the image by one pixel seems to have done the trick.

[alexdunae]

Normally you don't want to get rid of this as it forms a visual que for those using the keyboard.

I find this renders in a particularly bad way when an element is floated. To save yourself resizing images all over the place you can add

:focus {
 outline: 0;
}

to your stylesheet and be done with it. Those three lines are in every single site I make.

[penders]

:focus {
outline: 0;
}

I think with the idea being that you then redefine :focus styles on a per element basis. Accessibility... keyboard users.

Some would say including the above rule in a global reset css file was debatable. Eric Meyer does, but the Yahoo library apparently does not.

An interesting thread on global css resets...
[webmasterworld.com...]