Reply to Re: inline list separators

Your name:

Reply:


Posted by Ben C on 11/06/06 08:57

On 2006-11-06, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> I realise the second inline list idea is better practice than the
> first one:
>
> http://members.optushome.com.au/droovies/test/footer.html
>
> I would like (for either) for the separators to be not so tall.
> Any ideas that I can understand ...? <g>

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.

> 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).

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>.

[Back to original message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация