inline list separators

[dorayme]

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>

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

 

[Ganesh]

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>

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

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

 

[Steven Saunderson]

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>

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

 

[dorayme]

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

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]

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

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

 

[Ben C]

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

 

[Dylan Parry]

http://members.optushome.com.au/droovies/test/footer.html

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.

 

[Steven Saunderson]

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

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.

 

[patrick j]

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?

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 j]

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.

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.

 

[Jonathan N. Little]

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>

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breaks in IE Of Course!</title>

<style type="text/css">
BODY { margin: 0; padding: 0; color: #333; background-color: #8D8FB5; }

#footer { margin: .1em auto; width: 25em; color: #FFF; background-color:
#8D8FB5; }

#footer A { font-size: .85em; text-decoration: none; color: #FFF;
background: #8D8FB5; }

#footer A:visited { color: #FFF; background-color: #8D8FB5; }

#footer A:hover { color: #F00; background-color: #8D8FB5; }

#footer A:active { color: #0C0; background-color: #8D8FB5; }

#footer UL { margin: 0; padding: 0; list-style: none; }

#footer LI { margin: 0; padding: 0; display: inline; }

#footer LI + LI:before { content: " | "; }

</style>
</head>
<body>

<ul id="footer">
<li class="firstListItem"><a href="http://www.y.com.au">website
design</a></li>

<li><a class="emailTo" href="mailto:[email protected]" title="...opens
email message to contact us">email&nbsp;us</a></li>

<li><a href="http://www.x.com.au/offices/offices.html" title="...phone
numbers, addresses">contacts</a></li>

<li><a href="http://www.x.com.au/stockists/sunStockists.html"
title="...all our stockists">stockists</a></li>

<li><a href="http://www.x.com.au/termsOfTrade.html" title="...legal
document">terms of trade</a></li>
</ul>

</body>
</html>

I guess you could use JavaScript for IE's deficiencies to *insert* the
"|" where it will not do it via CSS... Or let it hang and maybe with a
little more "tough love" approach to design IE users will either switch
or MS will start cooperating... (it is the approach MS uses with
everybody else!)

 

[dorayme]

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.

I rushed to fix this when surprised by it first thing this
morning (when it is convenient to look via my Winbox)! Curiously,
a bit of padding-bottom on the footer2 fixed it. No other browser
on my Mac, not even Mac IE (which you can see I have catered to)
exhibited this. WinIE seems to interact with
line-height/font-size and sets the height of footer2 very short.
I noticed the cutoff and did this (which some people... no not
you old hands ...) might find useful: turn a 1px border on to see
what might be happening.

In the situation where I use a footer, it is quite convenient to
have any amount of padding within reason.

Curiously, I notice different things in different browsers in
respect to the placement of the text v the separators, nicest is
middle, ugliest is when text is flush with bottom of vertical
separators. Unaffected by padding.

 

[dorayme]

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>

Yes, I have this. Basically I read all this stuff and some things
stick in my memory, usually highly simplified, and this rough
idea is then used and when problems arise, I try to fix without
getting too complicated (otherwise, one might be tempted just go
back to original articles and copy stuff as a template? I have
found that original articles do not always address problems that
I observe and it is quicker sometimes to just do ones best!

 

[dorayme]

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.

I assume it does not muck up the simple top footer?

Yes, I was most interested in that thread [1] and what old
Bootnic said (I think it was Bootnic). Thanks for reminding me of
this re list. I will put something in along the lines suggested
by Bootnic. Hang on... why not right now...

ok, done, I left out the margin bit Bootnic put, not
investigating the effect of this for now. Does this make the list
re zoom in 7 behave?

Something I cannot test as I have 2000 on my Winbox. But if IE7
becomes quite popular, I suppose I will consider upgrading OS.

[1] My first experience with IE7 was when I went around to a
friend's house and he had just downloaded it on his new Winbox. I
sat hearing him curse in the foulest way about it, but the
cursiest were about the zoom feature, what it did to lists, menus
and other texty things. It did not help his mood (he is a bit of
a stickler for good practice) that my sites, many of the parts of
which have not been updated to "best practice", did not suffer so
much (because using good old tables, or simply not using inline
lists and stuff) <g>

 

[dorayme]

<title>Breaks in IE Of Course!</title>

#footer LI + LI:before { content: " | "; }

I guess you could use JavaScript for IE's deficiencies to *insert* the
"|" where it will not do it via CSS... Or let it hang and maybe with a
little more "tough love" approach to design IE users will either switch
or MS will start cooperating... (it is the approach MS uses with
everybody else!)

Yes, thanks, I had a look at this. I take it the idea "unsnipped"
above is the crucial point of your code. Does not work in IE Mac
either... but that is easily provided for. I could not see
(across the different browsers) a lot of difference in separator
height "improvement" over my footer2 css. It was interesting also
to see how different browsers rendered yours in respect to where
the text was vis a vis the height of the separators. Sometimes in
the middle (most pleasant):

text | text

And sometimes both text and separators on the floor of a
horizontal line:

1
text 1 text

(you will have to imagine the two 1s joined and as a line)


Interesting idea. All in all, I might stay with footer2 as
enhanced with padding and hopefully Bootnic's Revenge on IE7
zoom.

 

[patrick j]

I assume it does not muck up the simple top footer?

The top footer is fine

Yes, I was most interested in that thread [1] and what old
Bootnic said (I think it was Bootnic). Thanks for reminding me of
this re list. I will put something in along the lines suggested
by Bootnic. Hang on... why not right now...

I think for this you need to view it in IE7. I found I had to fiddle
with the padding a bit as well as put in the { zoom: 100%; }
declaration.

ok, done, I left out the margin bit Bootnic put, not
investigating the effect of this for now. Does this make the list
re zoom in 7 behave?

Well I've just looked and it's not behaving

Here is a picture of it at 150%

Something I cannot test as I have 2000 on my Winbox. But if IE7
becomes quite popular, I suppose I will consider upgrading OS.

It is popular now

Windows XP downloads this as an automatic update and so the uptake is
hugely high.

The office I work in 2.5 days a week (yuk) is all full of people who
use PCs in the office and home and their PCs at home and work have
automatically updated to IE 7 now. For them IE 6 is a distant memory.

They're marvelling at the joys of tabbed browsing and are very grateful
to Microsoft for inventing it.

They are enjoying the zoom feature and once again are very grateful to
Microsoft for inventing that.

 

[dorayme]

In the first case it comes down to the font-size for the | characters,
which you can tweak.

Indeed. I must say, the look of soomething along this line of
thought:

<div id="footer">
<a href="http://www.y.com.au">website design</a>&nbsp;<span
style="font-size: .8em">|</span>&nbsp;

(where the link texts are .85em)

does appeal to me a lot. But not in iCab! In iCab, seemingly
uniquely?, the first footer (nothing to do with separator height)
has too much spacing between the text and the separators. I have
clean forgot if one can style a nbsp; (I tried it with uncertain
results just now)? Anyway, one would need to be able to "talk to"
just iCab because the gap is just right for other browsers
without tricks - and I don't know how to talk just to iCab. I

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.

There is something I better look into and that is borders not on
the li items but the links themselves? But too much time spent on
this for now!

 

[BootNic]

news: (e-mail address removed) [snip]

[snip]

Make sure you change #nav to #footer2 ;-)

 

[dorayme]

I assume it does not muck up the simple top footer?

The top footer is fine

Yes, I was most interested in that thread [1] and what old
Bootnic said (I think it was Bootnic). Thanks for reminding me of
this re list. I will put something in along the lines suggested
by Bootnic. Hang on... why not right now...

I think for this you need to view it in IE7. I found I had to fiddle
with the padding a bit as well as put in the { zoom: 100%; }
declaration.

ok, done, I left out the margin bit Bootnic put, not
investigating the effect of this for now. Does this make the list
re zoom in 7 behave?

Well I've just looked and it's not behaving

Here is a picture of it at 150%

Something I cannot test as I have 2000 on my Winbox. But if IE7
becomes quite popular, I suppose I will consider upgrading OS.

It is popular now

Windows XP downloads this as an automatic update and so the uptake is
hugely high.

The office I work in 2.5 days a week (yuk) is all full of people who
use PCs in the office and home and their PCs at home and work have
automatically updated to IE 7 now. For them IE 6 is a distant memory.

They're marvelling at the joys of tabbed browsing and are very grateful
to Microsoft for inventing it.

They are enjoying the zoom feature and once again are very grateful to
Microsoft for inventing that.

In that case, the zoom thing becomes more important than I
thought. (I thought a lot of people are not on XP SP2?) Anyway,
what else can I do. Maybe Bootnic's margins are important! Better
have another fiddle. Thanks for going to the trouble of picturing
the 150%. Yes, no good eh...

It is all this mucking about that makes me wanna go back to the
simple original presentational mark up with &nbsp; and upright
slash. The truth is that there is no maintainence problem with my
footers to speak of (esp as they are to "included" via php). If i
keep having probs, I go back to original (and - see other post -
too bad for spacing prob in iCab)

 

[patrick j]

I thought a lot of people are not on XP SP2?

I think it's true that a lot of people are not on XP SP2, but it is
also true that a lot of people are on XP SP2

I guess this comes from there just being so many Windows users.