Better 'reverse out' links Wednesday evening, 11 May 2005

Reverse out links are all the rage now a days (Flickr, Ta-da Lists) even i'm using them (minus the underline, tssk).

Well, in implementing them for a full blown accessible website, I noticed that at smaller sizes the descenders on characters such as 'g' could get obscured by the underline. So, i decided to make a couple of minor tweaks to my general anchor styles in the css.

a, a:link, a:visited
{
    color: #B218B2;
    padding: 0 1px;
}

a:hover
{
    color: #FFF;
    background: #B218B2;
    text-decoration: none;
}

The padding insures that the text is completely surrounded by the background colour whilst removing the underline on the hover makes the character descenders clearer, especially at smaller sizes.

 

Comments

 

Get Around

Journal
  • contemplating.Thoughts from a Christian world-view.
  • enjoying.Reviews of stuff i've been enjoying.
  • life.For those that would like to know what i'm up to, this is the place to look.
  • working.Thoughts and ideas on web development and projects i'm working on.
Other Places