PDA

View Full Version : Ugly blue-dotted frame on links.



CyBeRaY
10-18-2010, 09:16 AM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

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

traq
10-18-2010, 01:27 PM
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.

molendijk
10-18-2010, 08:36 PM
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.

jscheuer1
10-19-2010, 05:12 AM
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.


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.


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/css/properties/outline/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:


a {
outline-width: 0!important;
}

CyBeRaY
10-19-2010, 07:23 AM
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/css/properties/outline/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:


a {
outline-width: 0!important;
}

Thanks a lot, this worked!

molendijk
10-19-2010, 12:13 PM
Thanks John.
Do we need the !important?
===
Arie.

jscheuer1
10-19-2010, 02:34 PM
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.