[thelist] CSS Question

David Dorward evolt at david.us-lot.org
Tue Jul 9 08:20:00 CDT 2002


On Tue, 09 Jul 2002 16:08:46 +0200
Hershel Robinson <hershelr at netvision.net.il> wrote:

> I have a nav bar on the left of the page.  It looks like this:
>
> ...  <a class="col_menu" href="">About us</a><br /> <a
> class="col_menu" href="">Support<br />ThisOrg.org<br /></a> <a
> class="col_menu" href="">Something Else</a><br /> ...
>
> A.col_menu {
>    line-height: 1.5;
>    color: #330099;
>    font-family: "Arial", "Helvetica", "sans-serif";
>    font-weight: bold;
>    text-decoration: none;
> }
>
> This is working out very nicely, except that the one link which is
> two lines (Support ThisOrg.org) doesn't look great because the
> line-height becomes 1.5 there also.  What I would like is for each
> link to be separated by a space from the ones above and below it.
> Those links which are two lines, however, should not have that space
> between their own two lines.  While we're at it, I would also like
> the second line of those links to be indented a bit.
>
> I tried a few different ideas with <div>s and <p>s but I haven't
> gotten it just yet.

You could try setting display: block; and height: 2em;

A few points you should watch out for:

* An underscore in the class name generates a parse error in the CSS
  validator, I think this may be a bug in the validator, but I try to
  avoid them.

* sans-serif is a generic font family, it shouldn't be quoted

* I would use a.class rather then A.class for forwards compatability
  with XHTML (Mozilla treats a.class and A.class as different
  selectors given an XHTML doctype).


--
David Dorward                                   http://david.us-lot.org/
HTML email is a bit like using coloured paper and glitter ink on a CV.



More information about the thelist mailing list