470,594 Members | 1,158 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,594 developers. It's quick & easy.

Rendering of horizontal menu

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

Jul 20 '05 #1
2 5123
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/>
Jul 20 '05 #2
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

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

15 posts views Thread by theo | last post: by
5 posts views Thread by Chris Beall | last post: by
2 posts views Thread by Sergio E. | last post: by
reply views Thread by Jack Gray | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.