box around clicked links

jollywoz

07-11-2002, 06:54 PM

Hi
when i click a normal href link i am geting a dashed box appearing around the text which i want to get rid of. i've noticed other sites don't have this problem but are underlining their links, i have removed the underline this with css, are the two related perhaps?

redhead

07-11-2002, 07:03 PM

not sure about it being related to the removed underline, but you could try:

1) this in your css file: a:link {border: 0}
(not sure if that works though ;))

2) or this on the link:
<a href="#" onfocus="this.blur()">

remember with either of these methods some poeple like to navigate without the mouse, and might use the border to make sure they know where they are.

happy coding :thumbsup:

Feyd

07-11-2002, 07:04 PM

This is a standard usability feature for people using text readers and other visually impaired/disabled persons. Just though I'd point that out, however, if you want to get rid of it, do <a href="somepage.ext" onfocus="this.blur();">somepage</a>

Just add onfocus="this.blur();" to your hrefs.

glenngv

07-12-2002, 04:37 AM

if you have many links in your page, you can just programmatically do this instead of putting onfocus event handler on all your links:

<head>
<script>
function removeFocusOnAllLinks(){
for(var i=0 ; i < document.links.length ; i++)
document.links[i].onfocus=blurLink;
}

function blurLink() {
if (this.blur) this.blur();
}

window.onload=removeFocusOnAllLinks;
</script>
</head>

joh6nn

07-12-2002, 10:12 AM

that'll work, but it's not the Right Thing.

in theory, what you're looking for is the css attribute "outline", and you want to set it to none. however, as far as i know, there aren't any browsers that actually support it yet (though newer builds of mozilla might. i haven't tested in anything higher than 1)

jollywoz

07-12-2002, 10:27 AM

:) thanks for all your help guys

premshree

07-12-2002, 12:30 PM

You could use <table> for links.....

<table onMouseover="this.className='overClass'; return true" onMouseover="this.className='outClass'; return true" onClick="location.href='someLocation.ext'"><tr><td>Link Text</td></tr></table>

:thumbsup:

jkd

07-12-2002, 04:45 PM

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

Should take care of it in Opera and Gecko. (Might be a:focus though, can't remember)

You can also utilize a psuedo-supported property from CSS3, user-focus, in Mozilla:

a {
-moz-user-focus: none;
}

This takes it out of tabbing, applies no indication when it is focused (well, because it can't be focused anymore).

Feyd

07-12-2002, 05:57 PM

Personally, this is what I've used when I don't want any visible focusing going on (and, sorry to say, but if I have an image based navigation, I don't want dotted lines ruining the illusion of it...disabled or not, but I digress)

A {
user-focus: none; outline : none; -moz-user-focus: none; -moz-outline: none; behavior: url(/includes/userfocus.htc)
}
A:LINK, A:ACTIVE { whatever }
A:FOCUS {
user-focus: none; outline : none; -moz-user-focus: none; -moz-outline: none; behavior: url(/includes/userfocus.htc)
}
A:VISITED { color : #666666; whatever }
A:HOVER { color : #FF9900; whatever }

and the file userfocus.htc (that I stole from jkd a while ago :thumbsup: ) looks like this:

<PUBLIC:ATTACH event="onfocus" onevent="element.blur()" />

And make sure you upload that as ASCII

applesauce

07-12-2002, 06:46 PM

img { border-width: 0px }

works for me in ie

jkd

07-12-2002, 11:41 PM

:eek: Feyd, now *that* is obsessive! :D

:cool:

Feyd

07-12-2002, 11:53 PM

Originally posted by jkd
:eek: Feyd, now *that* is obsessive! :D

:cool:

Definitely...though it does cover the entire page, except for two things which keep it from perfection (and the first one is just odd) : it doesn't work on imagemaps, and doesn't work on clickable form elements (buttons, radios, checkboxes, etc.), but it does cover most everything