inline list separators

I realise the second inline list idea is better practice than the
first one:

http://members.optushome.com.au/droo...st/footer.html

I would like (for either) for the separators to be not so tall.
Any ideas that I can understand ...? <g>

Realise I may have had problems re this sort of thing in the past
and someone like JL who has a memory like an elephant might
rightly cane for it. Just seem to have lost that thread if it was
the same sort of q.

If anyone can think of better for the second construction for
other reasons too, I will be all ears. (I know about the standard
line on visited needing a different color. I will pay a lot of
money to anyone who says nothing about this. I will give a brand
new polish joke away).

--
dorayme

dorayme wrote:

THis is a good example I don't think there can be anything better than
this. I've saved this..

Is there any good collection of these?

ga

On Mon, 06 Nov 2006 13:43:25 +1100, dorayme
<doraymeRidThis@optusnet.com.au> wrote:


I removed 'font-size: .85em;' from #footer a and put it in #footer
and this reduced the height of the border bars slightly (Opera 8).

--
Steven

In article
<1162785483.292575.204620@k70g2000cwa.googlegroups .com>,
"Ganesh" <ganeshjacharya@gmail.com> wrote:


The bit about Mac IE in the css is something tactical to solve a
problem of the borders appearing like a soul away from the body:
ie. there was a bunch of borders to the left, while the footer
text was fine in the centre (sans separators). This suggested to
me that there was likely some inelegance in the whole thing. It
is a strange beast Mac IE. (I like to do things to keep it happy
for sentimental reasons).

I'm sure there would be better - there is always better, cleaner,
neater, more elegant. But the height of the separators bothers
me. These are controlled by the height of the box containing the
list items, which in turn is controlled by the font-size assigned
to the li I suppose... my brain hurts at the point of then
considering line-height..?

--
dorayme

In article <fjetk29oq97t1f33qfjl1dvnemilnvi5q4@4ax.com>,
Steven Saunderson <phelum@Syd.au> wrote:


Hi Steven, I could not see that effect on Mac FF or Safari?

--
dorayme

On 2006-11-06, dorayme <doraymeRidThis@optusnet.com.au> wrote:

In the first case it comes down to the font-size for the | characters,
which you can tweak. In the second case, it's the height that the
browser decides to make inline boxes, which is also usually some
function of font but the exact details are up to the browser.


I don't think there is a better way. The heights can be precisely
controlled as explained below, but you end up having to use a table in
this case, because you also need centering.

If you use borders, then the height of a border is given by the height
of the box it a border of.

We can't precisely control the height of inline boxes. In the CSS 2.1
spec under "height" it says:

"This property does not apply to non-replaced inline-level [p. 119]
elements. See the section on computing heights and margins for
non-replaced inline elements [p. 167] for the rules used instead."

So we need to make these boxes something other than inline. But we still
want them next to each other.

There are three ways to do this: float, display: table-cell, or display:
inline-block.

Inline-block doesn't work on FF. So how about float?

We can make li float: left, set whatever height we want on it, and give
it a left border which will get exactly that height.

But in this case there is a further problem. We need the list-items
centered, but floats float to one side or the other. text-align: center
means nothing to them.

If we could shrink-wrap the floats in a box that we then centered with
auto left and right margins, that would work. But the only kind of box
that can be centered that way while still being shrink-to-fit is a table
box.

Setting display: table and margin: 0 auto on the ul, and making the
list-items float: left with left borders works.

But if we're using display: table anyway, we may as well make the floats
table-cells, and basically make the whole thing a table.

#footer3
{
display: table; /* so we can shrink-to-fit and centre */
margin: 0 auto; /* centres horizontally */
border-spacing: 0;
}

#footer3 li
{
display: table-cell; /* Might as well, we're already using display:
table */
height: 20px; /* We can set a height on these */
border-left: 1px solid #fff;
padding: 0 .3em 0 .3em;
}

I've heard that display: table and display: table-cell don't work on IE
though. So you'd have to actually use <table> <td>.

dorayme wrote:


No one else seems to have mentioned this, but the second example doesn't
work properly in IE7 (default settings, WS2003). In that example, the
text is cut-off at the bottom.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.

On Mon, 06 Nov 2006 19:17:24 +1100, dorayme
<doraymeRidThis@optusnet.com.au> wrote:


The effect here (Win NT) isn't that significant but applies to Opera 8,
IE 5.5, and FF2. I changed the background colour for LI and could see a
blank area above and below the anchor text. Moving the font-size
declaration to the UL rule did eliminate the blank areas and reduce the
height of the border lines slightly.

Perhaps Mac browsers minimise the UL height automatically whereas my Win
browsers default to a height of 1em.

--
Steven

On Mon, 6 Nov 2006 03:58:03 +0000, Ganesh wrote
(in article <1162785483.292575.204620@k70g2000cwa.googlegroups .com>):


It's a nice horizontal list indeed.

You may know of this resource for horizontal list info amongst other
things:

<http://css.maxdesign.com.au/index.htm>

--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>

On Mon, 6 Nov 2006 09:29:42 +0000, Dylan Parry wrote
(in article <4r8djnFqac9fU1@individual.net>):


And if you zoom in IE7 then all manner of issues arise with the
horizontal list.

I had this problem with the horizontal lists on my web-site and this
was solved by BootNic in the recent thread:

"IE7 zoom messes up horizontal lists"

What is required is a separate style-sheet for IE7 with this
declaration { zoom: 100%; } the the selector ul and li.

In addition create a separate padding declaration for the li selector
in the IE 7 style-sheet and then muck about a bit until it works.


--
Patrick
Brighton, UK

<http://www.patrickjames.me.uk>