Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question box around clicked links

    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?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmmm......

    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
    Last edited by redhead; 07-11-2002 at 07:12 PM.
    redhead

  • #3
    Regular Coder Feyd's Avatar
    Join Date
    May 2002
    Location
    Los Angeles, CA Maxim: Subvert Society
    Posts
    404
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Moderator, Perl/CGI Forum
    shadowstorm.net - subvert society

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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>

  • #5
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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)
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for all your help guys

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use <table> for links.....

    Code:
    <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>

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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).

  • #9
    Regular Coder Feyd's Avatar
    Join Date
    May 2002
    Location
    Los Angeles, CA Maxim: Subvert Society
    Posts
    404
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

    Code:
    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 ) looks like this:
    Code:
    <PUBLIC:ATTACH event="onfocus" onevent="element.blur()" />
    And make sure you upload that as ASCII
    Moderator, Perl/CGI Forum
    shadowstorm.net - subvert society

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    img { border-width: 0px }

    works for me in ie

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Feyd, now *that* is obsessive!


  • #12
    Regular Coder Feyd's Avatar
    Join Date
    May 2002
    Location
    Los Angeles, CA Maxim: Subvert Society
    Posts
    404
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    Feyd, now *that* is obsessive!

    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
    Moderator, Perl/CGI Forum
    shadowstorm.net - subvert society


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •