here I had to sacrifice the padding.
But you could also:
use box-sizing, loses some cross-browser comp
add an extra wrapper as a hook for the padding, mark up for the sake of CSS
adjust elements OUTSIDE this code accordingly ( padding is always added to the width , even with min-width anyway. So max-width:54em; padding: 0 3em; should work; as long as you know the element will never collapse to 0 width), may cause headache
Yes, sorry, I misread your code. Ignore my silly comments.
It’s odd that the lack of white space causes problems, though. Normally you wouldn’t have that problem. But funny things can happen with inline-block and white space, but I’m not clear enough on it to advise.
as I said everything costs something!
In this case however a quite a bargain.
See, when you made the UL inline , you are having the rendering agent treat the element as inline text ( so now it has no width) but then you make the LIs inline blocks , which would also collapse if it weren’t for the inherited text-align:justify. What I didnt say in my first post, but I did think about… is that most people dont seem to understand how “justification” works, not just in web design, but in typesetting in general.
If you were typesetting a column for a newspaper… the last line w/o enough text to wrap to a follow up column… will not pad out to justify the spaces between words. In short you need text, that wraps and, spaces between words.
Entirely butting the list items like that ( aside from making the HTML difficult to follow for humans) also makes it appear like “menuitem1menutem2menutem3menutem4” to the rendering agent. even if you were to put a single white space between the LIs the whole issue would be fixed. There is always a trade off, this one seems quite minor.
as far as how to carry it off gracefully in PHP, well I like line breaks and indents when I output my HTML block elements… but if that is prohibited, why not just add a single white space at the end of the string that closes your list item ? echo "</li> "; will literally solve it!
Putting it in a php include should have no impact on your code. I verified that removing white space kills it. Although I don’t know the answer to that. A said, I’m pretty sure that’s just what inline block does. Reminds me of someone saying “it hurts when I touch here doctor” - well then don’t touch there. Just keep the white space. If your menu items are all roughly the same width, the easiest would be to just give the li or a a fixed width and text align center. Here are all the ways to center your menu in the available space http://www.visibilityinherit.com/code/center-nav.php.