Re: Centered equal-width horizontal nav list CHALLENGE

Chris Beall wrote:

Spartanicus wrote:
(snip) 
This issue has been dealt with, several of the regulars here have pages
up on this, search the archive (keywords "inline-block" and "centered").

Spartanicus,

I got 32 hits, including two references to pages you wrote. I've tried to interpret what I read there and have added it to the demo page at http://pages.prodigy.net/chris_beall/Demo/centered%20horizontal%20list.html

It now works as well as can be expected in IE 6. There's an odd border-position issue with Firefox (and NN 7.1) and Safari which I would have to resolve. Any suggestions on that?

Chris Beall

I've now determined that the border offset is related to line-height: 150%, which I had added to avoid vertical overlap of the menu items when they were stacked. Removing this brings the text back inside the border (but pressed hard against it at the top, except in IE). I've found no twiddling of padding and margins that will center it in both Firefox and IE, nor have I resolved the vertical overlap problem. I've added my current attempt, with styling to match the intended final version, to the demo page.

I am increasingly suspicious that my original objective is impossible to meet. This is frustrating because the page is one that my daughter is working on; it looked fine with a table layout (but menu entries would not stack in narrow windows). I talked her into discarding tables and using a list, but so far can't replicate the appearance of the original table even in wide windows.

Chris Beall


.