Doted outline around every butten when clicked

[jaminunit]

Man it looks so ugly

Can anyone tell me how I can get rid of the dotted line that happens when you click any button when using firefox. ?

 

I have checkout out other peoples sites and it happens to every one.

 

:(

 

Any ideas?

 

J

[jaminunit]

Man it looks so ugly

Can anyone tell me how I can get rid of the dotted line that happens when you click any button when using firefox. ?

 

I have checkout out other peoples sites and it happens to every one.

 

:(

 

Any ideas?

 

J

sorry forgot to mention, when I say button I mean image button like buy now or add to cart.

 

does anyone know if this is fixable?

 

Cheers

 

Josh

[jaminunit]

sorry forgot to mention, when I say button I mean image button like buy now or add to cart.

 

does anyone know if this is fixable?

 

Cheers

 

Josh

 

bumpidybump.....

anyone???

 

I know its a css thing.... but how do I fix....

 

does anyone know what I'm taling about?

[yamthief]

bumpidybump.....

anyone???

 

I know its a css thing.... but how do I fix....

 

does anyone know what I'm taling about?

 

ah.. ur not going to like this...

this is just something firefox does, nothing to do with css, and as far as i know u can't turn it off.

even if u could, it'd only be a local change. Everyone else's pc will still have a dotted border.

sorry!

[Carbon]

he's right I'm afraid, but if you want to turn it off for IE then use this...

 

<a href="mypage.php" hidefocus><img src="piccy.gif" border="0"></a>

 

Carbon

[♥Vger]

This is not a problem with Firefox - at least not with up to date versions of it, so it must be in the stylesheet somewhere (and have been added to it). Do a page search in stylesheet.css for 'dotted'.

 

Vger

[Guest]

The correct html coding is:

 

<a href="whateverlink" onFocus="if(this.blur)this.blur()"> but I have not been able to work out how to do it with CSS yet.

 

The apparent double onfocus instruction above stops the dotted line both when you click on the link and after you have clicked on it.

 

Vivienne

[♥Vger]

I checked this out on a default osCommerce website, using Firefox, before I posted. I see no dotted lines aound buttons. Check the stylesheet.

 

Vger

[Terra]

Sorry to contradict Vger but it is a Mozilla feature (and Firefox belongs to the Mozilla family). For background info on why it's happening go here: Links want to be Links

 

For fixing the problem try this [taken from article link above]:

"Later, the Mozilla family of browsers has implemented the "dotted line" too. On Mozilla Firefox 1.0 for example, the "dotted line" can however be removed by using the nonstandard CSS property -moz-outline-style, setting it to none."

 

So if you include:

a:active { -moz-outline-style: none;}

to your stylesheet the lines should disappear

 

Please take care to list the styles for the links in your stylesheet in the right "LoVe HAte" order:

:link

:visited

:hover

:active

or it won't work

 

Tested on my own site with Firefox 1.0.7 and solution seems to work fine. Plus point of this solution is that you only need to include one line of code into your CSS document and it's sorted. No need to add code to each link on your site :thumbsup:

 

Other browsers:

Win/IE6 and Win/IE5.5 and Win/Opera 8.5 .. no dotted lines with default a:active

not tested on Mac/Safari or the Konqueror family on Linux

 

Terra

[♥Vger]

Glad that I asked Edith to take a look at this thread. Forget what I said - listen to her, she's the expert on CSS.

 

Vger

[Terra]

So if you include:

a:active { -moz-outline-style: none;}

to your stylesheet the lines should disappear

 

Oh my, just realised that some dots survived :-" .. however, applying the same bit of code to "a" got now 100% rid of dotted lines.

 

Revised solution:

a { -moz-outline-style: none;}

a:active { -moz-outline-style: none;}

 

and pesky dotted lines in FireFox be gone!

Terra

[jaminunit]

Oh my, just realised that some dots survived :-" .. however, applying the same bit of code to "a" got now 100% rid of dotted lines.

 

Revised solution:

a { -moz-outline-style: none;}

a:active { -moz-outline-style: none;}

 

and pesky dotted lines in FireFox be gone!

Terra

 

 

YAY!!!! you people ROCK!!!!

 

Thanks so much helped a treat.

 

I think they must have put that feature in for people that tab around instead of useing a mouse...

who the hell surfs the net with out a mouse?

 

Thanks all!

 

Josh

[jaminunit]

Sorry I tried the

 

a { -moz-outline-style: none;}

a:active { -moz-outline-style: none;}

 

solution but it didn't work.....

 

But

this did!

 

:focus { -moz-outline-style: none; }

 

Woo Hoo No more pesky outlines.

 

J

[Terra]

:focus { -moz-outline-style: none; }

Glad you found a solution! One question - do you select links by keyboard? I always thought that :focus only comes into play when a link is given focus by keyboard selection (not mouse clicking)?

 

Also, just realised that all this of course also impacts on the accessibility issue - for users who select links by keyboard (people with disabilities but also users with cr** laptops, mine included :) ), tabbing through links by keyboard is pretty essential, and these users would benefit from some means of distinguishing which link is currently selected.

 

If you don't like the dotted borders, you might want to consider using e.g. colour to distinguish which link is currently activated to support users who browse by keyboard. To see how focus & browsing by keyboard can work, have a look here: Dynamic Pseudo-Classes on links and go through the links with your tab key - links with keyboard focus shold show as aqua, as opposed to links selected by mouse.

 

PS: IE doesn't yet support focus, so all this is for Mozilla & other CSS-friendly browsers only. I think in IE :active is the equivalent.

 

Terra