RE: CSS Questions

by "Eric A. Meyer" <eam3(at)po.cwru.edu>

 Date:  Tue, 19 Oct 1999 10:09:00 -0400
 To:  hwg-style(at)hwg.org
 In-Reply-To:  exchange1bg2
  todo: View Thread, Original
>  1. I would like my external style sheet to display all <hr> tags through
>  the site I'm working on, as 1 pixel high and noshade. I achieve
>  the effect inline, with the following syntax: <hr size=1 noshade>.
>
>you can put something like this in your external style sheet:
>	hr { height: 9px;
>	     color: black;  }
>afaik, this doesn't work in netscape, though.   if anybody has a netscape
>solution, i'd be very interested in hearing it.

   Actually, what we need is a real solution, because the above shouldn't
work.  I know that IE allows it, but it shouldn't.  The correct answer is
something like this, although I confess to maybe getting some particulars
wrong:

   HR {height: 1px; width: 100%; border: 1px solid black;}

This is because an HR element is all borders, and no foreground-- thus,
'color' shouldn't have anything to work with.  IE's behavior is actually a
bug.  (Honest!)
   Like I say, I may have slipped on some details-- this one hasn't come up
in a while.  Look around http://css.nu/ for related material.  In
particular, try http://css.nu/articles/translate.html and also see if maybe
there's an article on this topic.

> I want the text in this "footer" to be smaller
>  than the body text, but am having problems achieving this effect.
>  The first thing I did was to insert the inline style
>  <.p style="font-size: -2pt">.  >>
>
>try giving it an actual point size.  i think you're confusing <font
>size="-2"> with the css font-size attribute.

   I agree.

>what the html tag means is,
>take the basefont size and subtract two from that.  the css font-size wants
>an actual point size.  so, if you remove the period and take out the "-"
>from what you have, you would end up with a font-size of 2pt.  <p
>style="font-size: 10pt"> will give you a 10pt font.

   Setting physical font size for any element is dangerous from an
accessibility standpoint, as well as a few other angles.  You'd be better
off to try something like this:

   P {font-family: Arial, Helvetica, Geneva, sans-serif; font-size: 1em;}
   P.footer {font-size: 80%;}

For some very exhaustive discussions of how to approach and deal with font
sizes, see the articles at http://style.verso.com/.  In particular, "Why
Points Suck," "The Amazing 'em' Unit," and "Beyond the FONT Tag..." are
recommended, but everything there is good.

--
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