Rendering of horizontal menu

[Ansgar Hein]

I have been playing around with several different versions for a
horizontal menu, but I haven't been able to build a horizontal
navigation based on the vertical one featured on www.alistapart.com in
the article "taming lists".

However I have managed to build a horizontal navigation but it has a
slight hitch in Mozilla and Opera, but it's fine in Internet Explorer.
It is a strange occurrance of a 4 - 5 Pixel bar in grey (which is the
background if not activated) when I set one menu item to an active state
(it has no link then) by assigning a class to it. Here's an example of
the menu I am talking about: http://www.officecatering.de.

Anybody out there with a similar problem or even better a hint?

Regards,
Ansgar Hein

[Steve Pugh]

Ansgar Hein <ni****@gmx.de> wrote:

However I have managed to build a horizontal navigation but it has a
slight hitch in Mozilla and Opera, but it's fine in Internet Explorer.
It is a strange occurrance of a 4 - 5 Pixel bar in grey (which is the
background if not activated) when I set one menu item to an active state
(it has no link then) by assigning a class to it. Here's an example of
the menu I am talking about: http://www.officecatering.de.

Anybody out there with a similar problem or even better a hint?

You have:

<li>...</li>
<li>...</li>

with li {display: inline;}

But the linebreaks between the <li>s are white space so what you have
is equivalent to <li>...</li> <li>...</li> and hence you get visible
whitespace between you <li>s that shows the grey background colour of
the surrounding <div>.

Removing all the whitespace fixes the problem in Opera. Mozilla is a
bit odd, removing the whitespace fixes it at every font zoom except
100%.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Ansgar Hein]

Hi Steve!

Amazing - that solved the problem, except for the 100% bug in Mozilla.
The code looks a bit ugly now, but I can live with that.

Regards,
Ansgar