Justified menus
Matt Riggott
Durdin, Drew Neil, Rory Fitzpatrick, and I had a little discussion
about one of those perennially-frustrating things to do in CSS:
justified menus. And we came dangerously close to solving it.
To explain the problem: let's say you have five menu items. You want
each to take up as much space as they need, but no more. (So you
don't just want five items each with a 20% width; one could be 10%,
one could be 18%, and so on.) But no matter, you always want the left-
most item to be at the far left, and the right-most item to be at the
far left, and everything else centred in between. Justified menus.
See the attached file for the CSS to do it. It works in Safari and
Firefox, and of course fails miserably in IE6. Drew, I think you had
an idea for getting it working in IE, but I can't remember what it
was. Care to enlighten us?
If anyone else has an idea on how to get it working in IE, please
email the list. Bonus points for not using Javascript. And it's
cheating to manually set the widths, because we wanted the CSS to work
when menus are added and removed.
M.
Dougal Matthews
Something after the list.
--
Matt Riggott (mailto:matt.r...@gmail.com).
Dictated but not read.
Matt Riggott
> I see no attachments.
I don't know if Google Groups or your mail app stripped it, but you
can see it in the thread on the web:
<http://groups.google.com/group/refresh-edinburgh/t/833e150f9b8951b0>
M.
Dougal Matthews
Andrew Neil
Last Wednesday, while sipping on this month's Refreshing pints, Andy
Durdin, Drew Neil, Rory Fitzpatrick, and I had a little discussion
about one of those perennially-frustrating things to do in CSS:
justified menus. And we came dangerously close to solving it.
To explain the problem: let's say you have five menu items. You want
each to take up as much space as they need, but no more. (So you
don't just want five items each with a 20% width; one could be 10%,
one could be 18%, and so on.) But no matter, you always want the left-
most item to be at the far left, and the right-most item to be at the
far left, and everything else centred in between. Justified menus.
Let me just flesh that out a little. We have to overcome a small problem with the behaviour of justified text: that hanging final line. If we justify a paragraph of text, we should see that each complete line is flush with the left and right edge of its container. But the last line of the paragraph will appear as regular left-aligned text.
So what if you only have one line of text in your 'justified' paragraph? It is going to look as though it is left-aligned.
My partial solution for a justified <ul>, was to set the <li>s as inline, and to append a 'filler' element at the end of the list. e.g.:
<ul>
<li>Events</li>
<li>News</li>
<li>About us</li>
<li>Contact us</li>
<li class="filler">*</li>
</ul>
The trick here is to force the li.filler onto a line of its own, thereby causing the _real_ <li>s to be justified. It's not possible to set the width of an inline element, but you can add padding. So the following rule should do it:
li.filler{
padding: 0 48%;
}
I would use javascript to add the li.filler, so that the original HTML wasn't muddied. In his solution, Matt has gone one better, by using div:after in his CSS. Bonus points for not using javascript, but is this going to work in IE6? (Or IE7, for that matter?)
My attempt at using inline <li>s had another major flaw. The spacing between words within an <li> would be about the same as the spacing between <li>s. I used a hackish fix for this: tuning the word-spacing for the <ul> (which tuned the spacing between <li>s), and for the <li> (which tuned the whitespace between words inside an <li>). Unsurprisingly, this had inconsistent results in the different browsers. Safari and Firefox looked roughly the same, IE was passable, but then Opera crashed and spoiled the party.
What I needed was something half inline, half block. Like... an inline-block maybe. When I was trying this out, only Safari and Opera supported this feature, so I gave up and moved on. But that was until last Wednesday...
See the attached file for the CSS to do it. It works in Safari and
Firefox, and of course fails miserably in IE6. Drew, I think you had
an idea for getting it working in IE, but I can't remember what it
was. Care to enlighten us?
Andy Durdin got the discussion started by talking about a cross-browser solution for inline blocks. The Mozilla blog recently did a feature on this:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
This got me thinking about my failed attempt at creating justified menus. If the cross-browser inline-block hacks work, then it might just be possible.
I haven't had time to try it out yet. As a bounty, I'll buy a pint at the next refresh meetup for anyone who solves this problem.
Cheers,
Drew