RE: CSS Questions

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

 Date:  Tue, 19 Oct 1999 10:09:00 -0400
 To:  hwg-style(at)
 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

   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 for related material.  In
particular, try 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  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)  -
 Hypermedia Systems Manager
 Digital Media Services      
 Case Western Reserve University

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