PDA

View Full Version : box around clicked links



jollywoz
Jul 11th, 2002, 07: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
Jul 11th, 2002, 08: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
Jul 11th, 2002, 08: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
Jul 12th, 2002, 05: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
Jul 12th, 2002, 11: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
Jul 12th, 2002, 11:27 AM
:) thanks for all your help guys

premshree
Jul 12th, 2002, 01: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
Jul 12th, 2002, 05: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
Jul 12th, 2002, 06: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
Jul 12th, 2002, 07:46 PM
img { border-width: 0px }

works for me in ie

jkd
Jul 13th, 2002, 12:41 AM
:eek: Feyd, now *that* is obsessive! :D

:cool:

Feyd
Jul 13th, 2002, 12:53 AM
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