Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!


Click here to return to the 'Create custom clicked-link outlines in Safari' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 18, '04 01:03:36PM

I'm not sure I know exactly what you are looking for. This will turn off underlining on hover only, and add outline to hover:

a:active, a:visited, a:hover { outline: 3px auto }
a:hover { text-decoration: none ! important; }

if you want to turn off *all* link underlining, change the second line to:

a { text-decoration: none ! important; }

However, if you do that you'll want to make sure that there's some other !important rule (a specific color, an outline, etc.) for the plain 'a' tag, or you'll never be able to find links that are set to the same color as the text (which isn't a very good idea, but some people do none the less).



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: luhmann on Feb 18, '04 02:38:53PM

Hmm, doesn't seem to work. Yes I'd like to turn off all underlining. But the above code doesn't seem to help with either the hover or the underlining - everything works pretty much the same as the original code in the hint above - even on newly opened web pages. Actually, it doesn't even work as well, because now the outline is the same color as the text rather than as specified (lightblue).

This is why I hate CSS - it is so difficult to get right.



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: luhmann on Feb 18, '04 06:18:39PM
This seems to work for me. It turns out I had to quit and relaunch Safari to get it to work:
:link, :visited { text-decoration: none }
:link { text-decoration: none }
:link:hover, :visited:hover { outline: 3px auto; color: lightblue; }
:link:active, :visited:active { outline: 3px auto; color: lightblue; }


[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 19, '04 01:21:11AM

I had taken the color specification out of my example; sorry about that. I also noticed that I had to quit and re-launch, but other than that my CSS should work fine.

If you don't ever want the underlines, it's best to put in the ! important as in my example; that ensures that you'll get text-decoration: none even if they specifically set a text-decoration for :hover using a higher-precedence selector than a simple catch-all :hover



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: huzzam on Feb 18, '04 03:12:02PM

shouldn't the second line be:

a:hover { text-decoration: underline !important; }

? --peter



[ Reply to This | # ]
Create custom clicked-link outlines in Safari
Authored by: stewby on Feb 19, '04 01:23:13AM

No... that would make hovered links always have an underline, and the question was about removing all underlines.



[ Reply to This | # ]