Get rid of the dotted border

[Dragosvr92]

Hello

Dos anyone here know how may i remove the dotted border from buttons when you click on them ?

 

i tried outline: 0px; and outline: none; but it dosnt make any change in any browser

 

and i would also like to remove the border from a single link if anyone knows

as this removes the border of every links :-\

 

i tryed to replace the a with h2 or a class but it didnt do anything

a:focus {

    outline: 4px solid lime;

}

 

 

sry for my bad english

[Rohlan]

Never knew this was possible, I'm also interested in knowing.

[JasonLewis]

Why do you want to remove it?

[Rohlan]

It's just kind of ugly, and servers little purpose... i think

[Dragosvr92]

Rohlan you can remove it from every link using this :

 

a:focus {outline: 0px solid lime;}

 

@Fear

i want to change it because it looks shity on my logo

btw do u know how to set the height etc for the link to be only on the text and not to every empty space

 

and ... i just want to change it

 

 

[attachment deleted by admin]

[Dragosvr92]

Anyone please ?

[JasonLewis]

If it's a block level element you could try floating it left, but unless you know how floats work it might cause problems.

 

float: left;

[Dragosvr92]

hm i tried tha on the logo and it worked

only a small problem lol

the rest of my page apeared in left also

i guess its because the logo is placed in the body o.o

i dont know what float dos or what it means in english

 

Edit:

Heres the code that i think brokes the link

 

<a href="index.php"><h2 class="Logo">WheresMyIP.Net</h2></a>

 body{
 color:#808080;
 background-color:#454342;
 margin: 50px 150px;
 font-weight:bold;
 }
.Logo{color: #fff;text-shadow: 1px 1px 4px red;}

[isedeasy]

Its not good practise to remove the outline on focus. Try tabbing through your links and you will see the issue you have.

[Dragosvr92]

tabbing through links?

whats that

 

the link only looks like that if i have this margin property inside the body

margin: 50px 150px; 

[JasonLewis]

tabbing through links?

whats that

 

the link only looks like that if i have this margin property inside the body

margin: 50px 150px; 

 

Sometimes people aren't able to use a mouse to browse through a website, so they can use the tab key to tab through links that are on the website, which is why they use the outline so you're able to tell which link you have selected.

[Dragosvr92]

i want to fix the dotted border to be seen only around the text

look in my attachment to see what i mean

[AtlasC1]

Change your css to:

 

h2.Logo a:focus {outline: none;}

 

And your Logo HTML to:

 

<h2 class="Logo"><a href="index.php">WheresMyIP.Net</a></h2>

 

-jm

[haku]

You shouldn't remove this. It's not good for accessibility. Some people (myself being one) often use the keyboard to navigate rather than a mouse - when there is no dotted border, there is no way to know which element you are focused on. Very annoying.

[Dragosvr92]

@atlas

thank you very much for your reply

i only changed my logo from:

 

<a href="index.php"><h2 class="Logo">WheresMyIP.Net</h2></a>

to:

<h2 class="Logo"><a href="index.php">WheresMyIP.Net</a></h2>

you seem to know some css

ty again

 

haku

if you readed my posts closer i said i wanted to remove the border from a single link

or if not fix the border around it

[Rohlan]

I have to question the usage of keyboard navigation on websites. Unless we're talking google or a very basic website layout I really don't see how navigation is anything but a harduous task.

 

Removing the dotted border will most probably have no effect at all in accessibility from your users. I would however only remove dotted borders from specific elements other than all of them. A list of links is probably a bad idea to do without the d.border, but from a logo or for certain other situations i'm pretty sure its feasible.

 

If keyboard navigation was such an issue, we wouldn't be able to use onclick or other js perks.

[cssfreakie]

@atlas

thank you very much for your reply

i only changed my logo from:

 

<a href="index.php"><h2 class="Logo">WheresMyIP.Net</h2></a>

to:

<h2 class="Logo"><a href="index.php">WheresMyIP.Net</a></h2>

you seem to know some css

ty again

 

haku

if you readed my posts closer i said i wanted to remove the border from a single link

or if not fix the border around it

 

I saw quite some questions in the above thread, but to remove (which i would not like haku said)

outline-bottom:none;

[Dragosvr92]

uh .. dos everyone feel that smell ?

It smells like SPAM -.-

i have last posted about 6 months ago saying the issue was solved ... i just forgot to mark it

 

And the idea was to remove the border from only one element ,not the entire links

 

EDIT

Where the hell did the solved thing dissapear :|

MOD Incompability with this ver of forum or what??? o-O