W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2003

Re: navigation banner in css.

From: James Craig <work@cookiecrook.com>
Date: Mon, 10 Feb 2003 13:53:05 -0600
Message-ID: <009d01c2d13e$0ad98400$c8280f0a@JCRAIG>
To: "Kynn Bartlett" <kynn@idyllmtn.com>, "W3c-Wai-Ig" <w3c-wai-ig@w3.org>


I'd like to suggest a couple changes to your example style sheet. First of
all, when you specify the background-color of an element, you should specify
the foreground color. That way you can ensure high enough contrast in a user
style sheet. Also, you may want to slightly change the appearance of the
visited links (just my opinion) so I added the second rule...

Also, the border may not inherit on child elements like images so I added
the last rule. Some UAs (like WinIE) don't give complete control to user
styles. In other words, it is still possible for CSS in an author style
sheet to override CSS in a user stylesheet. Silly, but true.

a:link, a:visited {
  color: #000 !important;
  background-color: #ffc !important;
  border: solid 0.1em #f00 !important;
  }
a:visited {
  color: #000 !important;
  background-color: #eee !important;
  }
a:link img, a:visited img {
  border: solid 0.1em #f00 !important;
  }


----- Original Message -----
From: "Kynn Bartlett" <kynn@idyllmtn.com>
To: "Charles McCathieNevile" <charles@sidar.org>
Cc: "Joe Clark" <joeclark@joeclark.org>; "WAI-IG" <w3c-wai-ig@w3.org>
Sent: Saturday, February 08, 2003 1:23 PM
Subject: Re: navigation banner in css.


>
> On Friday, January 24, 2003, at 07:41  PM, Charles McCathieNevile wrote:
> > Visually (i.e. for the large majority of people) it is not clear how
> > to interpret <a href="foo">this is a </a><a href="bar>very</a> <a
> > href="baz">contrived example</a>.
>
> But a solved problem:
>
> /* user.css */
>
> a:link, a:visited {
>      margin-right: 0.3em !important;
>      margin-left: 0.3em !important;
>      padding-right: 0.5em !important;
>      padding-left: 0.5em !important;
>      background-color: #FFFFCC !important;
>      border: 0.1em solid red !important;
>      /* Adjust to suit taste, if you need to have your visual links
>         distinguished from each other */
> }
>
> Now, you can point out that this functionality is not EASY to install
> in a
> browser -- but that is the fault of the browsers for not allowing basic
> CSS tricks like this to be easily bundled and placed into a user style
> sheet.
>
> --Kynn
>
> > --
> Kynn Bartlett <kynn@idyllmtn.com>                     http://kynn.com
> Chief Technologist, Idyll Mountain                http://idyllmtn.com
> Author, CSS in 24 Hours                       http://cssin24hours.com
> Inland Anti-Empire Blog                      http://blog.kynn.com/iae
>
Received on Monday, 10 February 2003 16:24:49 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:08 GMT