[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