By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,208 Members | 1,550 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,208 IT Pros & Developers. It's quick & easy.

Rendering of horizontal menu

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.