[thelist] CSS Question Round 2

[Brian Johnson]

>
>
>>If anyone has any better ideas (perhaps ideas which were actually
>>implemented and tested), here is my original post (slightly modified with
>>other suggestions received):
>>
>>
Try this perhaps. No, I haven't tested it.

a.colmenu {
    display: block;    /* Converts a from in-line to block */
    margin: 0.5em 5px;    /* Top/bot margins are half of base font height */
                                     /* Side margins are 5px (or
whatever you want) */
    padding: 0px;    /* Ensure no padding inside your new block */
    }

Now, some browsers may have a problem displaying 0.5em.  You might try
using pixels, say 6px if you have a 12px font. Also note that the
browser should pick and use the larger of the top and bottom margins.
 These margins are not additive. So the vertical distance between <a>'s
will be 0.5em - not 0.5em+0.5em.  This should give you the illusion of
1.5 line-height between <a>'s.

I'd also remove the internal <br/> that splits up Support and
ThisOrg.org unless you always want it on two lines regardless of the
nav's width.

Another alternative would be to use an unordered list. <ul> and <li> like:

<div id="navbar">
<ul>
    <li><a href="">blah</a></li>
    <li><a href="">blah2</a></li>
    ...
</ul>
</div>

Then,
#navbar ul li a {
   color: #330099;
    background-color: transparent;
    font-family: "Arial", "Helvetica", sans-serif;
    font-weight: bold;
    text-decoration: none;
}

#navbar ul li {
    margin: 8px 0px;    /* play around with these to get the spacing you
want. */
    padding: 0px;
    list-style-type: none;
}

I terms of indentation of the second line.  You'll have to fool around
with the :first-line pseudo class using negative margins.  Really
confusing! And I don't think most browsers support :first-line yet anyway.

Hope this helps.
-Brian