Firefox borders around links

**speedytina** · 09-08-2006, 04:28 AM

Hi;
Is there any way I can code my CSS <a> links to prevent Firefox from drawing rectangular dotted borders around every single link when they are clicked? I've played with

Code:

 a:active {text-decoration:none;}

and

Code:

a:active { border:none;}

etc. but nothing seems to work.
(Yes, I do have a reason for not wanting them to show on my web pages.)

Thanks

**mwinter** · 09-08-2006, 06:34 PM

Originally Posted by speedytina

Is there any way I can code my CSS <a> links to prevent Firefox from drawing rectangular dotted borders around every single link when they are clicked?

Yes, though clicking on a link isn't the reason why that indicator appears.

Yes, I do have a reason for not wanting them to show on my web pages.

Care to share it?

The feature you describe is a focus indicator, used to highlight where input focus lies within the document. Removing that indicator is an usability hazard, and I have serious doubts that your reason is justifiable. There is certainly no reason, ever, for removing it, though replacing it with an equivalent indicator might be acceptable.

Mike

**speedytina** · 09-10-2006, 07:28 AM

Mike;
Thanks for your input.

Care to share it?

Yes, one of the effects I'm trying to avoid is over-lapping bordered indicators when I have a two line link with reduced line height as in:

Code:

<html>
<title>blah</title>
<head>
<style type="text/css">
a{text-decoration:none;line-height:80%;font-size:300%}
</style>
</head>
<body>
<a href="http://www.dynamicdrive.com">blah  blah<br />blah blah blah</a>
</body>
</html>

( Font size is exaggerated to intensify unwanted effect. )

I wouldn't even mind if Firefox drew just one border around my two line link, but when it draws two overlapping borders it looks terrible. Wouldn't you agree?

Any idea how I can avoid this effect. Two line links with reduced line height are perfectly legitimate as far as I know, but Firefox is making it look messy.

Any solution would be appreciated.

Thanks

**ItsMeOnly** · 09-10-2006, 08:19 AM

this is "outline" property.

**mwinter** · 09-10-2006, 12:11 PM

Originally Posted by speedytina

... one of the effects I'm trying to avoid is over-lapping bordered indicators when I have a two line link with reduced line height ...

Then don't reduce the line height. It defaults to a value greater than 1.0 in most browsers for a reason, you know.

I wouldn't even mind if Firefox drew just one border around my two line link,

When an inline box is broken across more than one line box, borders and outlines are applied to each split inline box separately (though a border isn't applied to the split edges, whereas outlines are).

but when it draws two overlapping borders it looks terrible. Wouldn't you agree?

It hardly matters: the fault is yours for doing something silly, so you can't blame any browser for the resulting effect. However, what I think looks worse is clipped text, which is what often occurs when line height is reduced for multi-line text.

Any idea how I can avoid this effect.

Don't reduce the line height.

Two line links with reduced line height are perfectly legitimate as far as I know ...

Syntactically, perhaps. It's not sensible though: the line height should be at least 1.0.

Mike

**speedytina** · 09-10-2006, 04:57 PM

Code:

a{text-decoration:none;line-height:80%;font-size:300% outline:none;}

Code:

outline:none;

seems to work. I only want to apply this to one particular link. Is there really any harm in using this?

**mwinter** · 09-10-2006, 06:19 PM

Originally Posted by speedytina

Is there really any harm in using this?

If you remove the only focus indicator, then yes, there is. It's unlikely to affect mouse users, but it certainly will affect others as they cannot be certain that the link actually has focus. However, it also seems that you need to correct that line height, too. Even if it doesn't have an adverse affect on your system, it might on another platform that uses different fonts or font metrics (you haven't posted a link, so no-one can say for certain).

Mike

**kmarron** · 09-22-2006, 01:30 PM

Okay, so I'm registering a distinct lack of appreciation for removing focus indicators but I really dont like them on the page I just made.

www.waroftheroses.ie and http://www.waroftheroses.ie/BiogMenu.htm

They just look ugly!

Now I'm far from really knowing much about web design, but I need to get stuff out there and I need it to look well. And at the minute it just doesn't!

Please help - I need to get rid of these damn boxes! (I'm not having any similar problem in any browser other than firefox. Is it possible to remove them in firefox without effecting other platforms?)

**mwinter** · 09-22-2006, 01:52 PM

Originally Posted by kmarron

Okay, so I'm registering a distinct lack of appreciation for removing focus indicators but I really dont like them on the page I just made.

www.waroftheroses.ie and http://www.waroftheroses.ie/BiogMenu.htm

Are you referring to the blue lines? Those aren't focus indicators, they're just borders and you can remove those. The simple rule:

Code:

a img {
    border: none;
}

will do.

By the way, choose better alternative text. It is meant to replace images with content. A user doesn't need to be bothered with decorative images (use an empty value [""] instead of "bottom left" and such). You shouldn't be overly terse, either. For example, "Cast & Crew" not "Biogs", and "Crew Biographies" not "Crew Biogs".

Mike

**kmarron** · 09-23-2006, 10:40 AM

Magic, cheers.

Will get on it after lunch. And thanks for the Alt text advice also. Really know nothin about this designin lark....

But everyone needs web presence right...!

Thanks again,
kmarron

Thread: Firefox borders around links

Thread Tools

Search Thread

Firefox borders around links

Bookmarks

Bookmarks

Posting Permissions