RE: hwg-style-digest V1 #7

>> My VP was looking at it  and started complaining about "blue" words on a
>> green background.  I told
>> him there weren't any blue words. What I had done was use a table, with a
>> green background and text only for
>> my links.  I "thought" I had coded it properly so that the hyperlinks
>> would always remain white like I intended.
>> All looked fine in IE and NN.  Of  course our entire corporate office uses
>> the aol browser.
>
>All may have looked fine in IE and NN 4+...but you'll find the same problem
>in IE 3.x and Opera 3.2.  The browser does not respect the font color
>specification inside a link, even when nested properly (font inside of
>anchor).  A workaround is to span the links with a style declaration:
>
><span style="font-family: arial; font-size: 14pt; font-weight: bold; color:
>#FFFFFF">
>blah, blah, blah
></span>

   This might not work either.  The problem is this.  Assume that you wrap
seven anchors in the SPAN you show above.  All of the anchors will still be
blue (although they'll probably pick up the font values) because the
browser's UI assigns the color "blue" to anchors[1].  This assignment
overrides the inherited color of "white", because explicit assignments
always override inherited values.
   Thus, I'd recommend that Melanie try something like the following:

   SPAN.navlinks A:link {color: white;}
   SPAN.navlinks A:visited {color: gray;}

   <SPAN class="navlinks">
   <A HREF="">...</A>
   </SPAN>

(With the actual links filled in, of course, and the particular color and
other styles desired for these links.  You could also use a class on the
table cell which contains the links and drop the SPAN, but this is less
likely to work in all current browsers.)
   By explicitly assigning your own colors to the links in the navbar (or
whatever you call it), you should override the UI's default styles and get
your own used instead.
   In CSS-unaware browsers, of course, this is a problem:  you end up with
the same blue-on-green situation which came up.  The solution (if you ask
me) is to assign a more blue-friendly color with a BGCOLOR attribute, and
the color you want using styles.  Thus:

   TD.navbar {background: green;}

   <TD class="navbar" bgcolor="silver">
   ...SPAN and links here...
   </TD>

This will set the cell's background to be green in CSS-aware browsers, and
silver (light gray) in all those browsers which don't understand CSS.  This
can keep everyone relatively happy, since you provide fallbacks for older
browsers while rendering the presentation you want in more modern browsers.
The only place you'll get into trouble is if the user has his colors set to
use silver links, in which case they'll get silver links on a silver
background.  Thus you should probably assign a document-wide link color in
the BODY tag, just to catch this sort of thing.


[1] Actually, the UI assigns whatever color the user has set in his
preferences, but in the vast majority of cases that's blue, so I used
"blue" to minimize confusion.

--
Eric A. Meyer  -  eam3(at)po.cwru.edu  -  http://www.cwru.edu/home/eam3.html
 Hypermedia Systems Manager
 Digital Media Services                http://www.cwru.edu/dms/dms.html
 Case Western Reserve University       http://www.cwru.edu/

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA