Results 1 to 7 of 7

Thread: Ugly blue-dotted frame on links.

  1. #1
    Join Date
    Oct 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ugly blue-dotted frame on links.

    1) Script Title: Animated Collapsible DIV

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem: When clicked on links an ugly blue-dotted frame appears. Is it possible to remove it completely from links?

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    that's done by the browser, as an indication of which link is active/ in focus. it's actually not a good thing to change, because some people use [ tab ] to navigate through links and they'd be lost without the borders.

    You can try a:link, a:visited, a:hover, a:active: border: 0 !important; but some browsers overrule such declarations anyway.

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,854
    Thanks
    49
    Thanked 259 Times in 251 Posts
    Blog Entries
    56

    Default

    Whenever you have <a href="...">whatever</a>
    you can take away the dots by replacing the link with:
    <a href="..." onclick="blur()">whatever</a>
    ===
    Arie Molendijk.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by traq View Post
    You can try a:link, a:visited, a:hover, a:active: border: 0 !important; but some browsers overrule such declarations anyway.
    Nope, it's not a border.

    Quote Originally Posted by molendijk View Post
    Whenever you have <a href="...">whatever</a>
    you can take away the dots by replacing the link with:
    <a href="..." onclick="blur()">whatever</a>
    Not always. If javascript is disabled, that won't work. Even with javascript enabled, if javascript changes the onclick event attribute for that a tag after it's parsed by the browser (two examples: onload of the page or onclick of another element), then the blur() will not execute.

    Quote Originally Posted by traq View Post
    that's done by the browser, as an indication of which link is active/ in focus. it's actually not a good thing to change, because some people use [ tab ] to navigate through links and they'd be lost without the borders.
    That's right traq. And only certain browsers do this as a matter of course. Others wait until the user starts using the tab key.

    If you must disable it you can use the outline css property, see:

    http://www.blooberry.com/indexdot/cs...ne/outline.htm

    Generally, with such a property that's a shorthand for a multi-part property, it's best (in order to get all browsers) to set the width to 0:

    Code:
    a {
    	outline-width: 0!important;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    molendijk (10-19-2010),traq (10-19-2010)

  6. #5
    Join Date
    Oct 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by jscheuer1 View Post
    Nope, it's not a border.



    Not always. If javascript is disabled, that won't work. Even with javascript enabled, if javascript changes the onclick event attribute for that a tag after it's parsed by the browser (two examples: onload of the page or onclick of another element), then the blur() will not execute.



    That's right traq. And only certain browsers do this as a matter of course. Others wait until the user starts using the tab key.

    If you must disable it you can use the outline css property, see:

    http://www.blooberry.com/indexdot/cs...ne/outline.htm

    Generally, with such a property that's a shorthand for a multi-part property, it's best (in order to get all browsers) to set the width to 0:

    Code:
    a {
    	outline-width: 0!important;
    }
    Thanks a lot, this worked!

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,854
    Thanks
    49
    Thanked 259 Times in 251 Posts
    Blog Entries
    56

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by molendijk View Post
    Thanks John.
    Do we need the !important?
    Often no. If there are other styles (from internal, or external stylesheets or inline styles), and/or scripted styles for the page or any of the a elements/tags on it and any of these contradict and come after the outline-width style I'm suggesting, then yes. The !important keyword would be required.

    Something I'm not clear on though is if you have :hover, :active, etc. pseudo-class selectors for any of these tags if even the !important keyword would be sufficient. If applied to those pseudo-classes, it would, perhaps not if only applied to the element itself. If this is a factor at all, it may vary by browser, so it would be safest to set it with the !important keyword for all possible pseudo-classes of the selector in their proper order.

    These are all just basic, well perhaps not so basic css considerations. They do arise from the basic cascading nature of css style. This extends to needing to be careful not to unintentionally contradict earlier styles with later styles, and needing to be aware that the nature of what one thing contradicting another later thing constitutes often varies somewhat by browser.

    There's at least one exception to the !important keyword's dominance in these matters. If it's also used with a later contradictory style, it will get overridden by the later style.

    And, for better or worse (depending upon what you're trying to do), the !important keyword cannot be scripted via javascript unless one is writing/appending a stylesheet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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