View Full Version : Navbar vertical instead of horizontal in Safari

04-26-2006, 08:43 PM
The navigation bar seems to be alright now in all browsers.

But a friend of mine who is an Apple user sent me a picture of the site in Safari and instead of horizontal, the navbar is vertical. Does anyone have experience with that and what could be done to correct it?

The test website is here:


Thank you for helping me out on this.

04-26-2006, 09:14 PM
I'm not on a Mac right now but actually Safari is very standards compliant... comparable to Firefox.
I can just guess but maybe it's the fact that you floated the anchors in the ist too (which isn't necessary). Something like this should be enough:

ul {
margin: 0;
padding: 0;
/* sometimes you might need to set a line-height to a value lower than the font size in order to make it look the same... (without it there is a gap sometimes) */
li {
display: inline;
list-style: none; /* this might not even be necessary */

For the anchors you just set font stuff and padding/margin.

Oh and I just have an idea! Maybe it's the missing width on your list (<ul>) which is collapsing to it's minimum and causing the floated links to go underneath each other... So at first I'd say "unfloat" the links and see what's happening.

P.S.: You link redirected me to spiegel.de because you have two "http://". I had to copy and paste it manually... you better correct that. ;)

04-26-2006, 10:12 PM
A thank you to Halle. You are very helpful. I will go through your suggestions tomorrow. Also corrected the double http. That happens when you stare on the screen too much :eek:

Danke und schönen Abend!

05-03-2006, 02:53 PM
I played around with the floats but when I took out some it changed other things. For example, I took out "float: left" under "#gmenu li" and the navigation bar collapsed to vertical and to the left side in IE (but not in Firefox). With this line it shows correctly horizontal and on the right side of the screen. Confusion reigns.

When you talked about the width, where is that supposed to go? I have no <ul> definition for the navigation bar; just for the normal list in the body. Or does that have an influence?

The little things are a pain. Maybe I should just put in a line telling Mac users to only use Firefox on this site ;)

05-03-2006, 03:24 PM
DE: Ich glaube einfach nur, dass es daran liegt, dass du keine Breite für #gmenu angegeben hast (IE braucht das normalerweise für "floated elements").
EN: I think it's just the missing width for the #gmenu.

#gmenu {
margin: 0 0 35px 0;
padding: 0 20% 0 0;
list-style: none;
float: right;
width: 280px;

Don't know if 280px is enough but it shouldn't need more that 300.

05-03-2006, 03:59 PM

Seems like this was it. My Mac friend says it's all horizontal now.

Vielen Dank für die prompte Hilfe!

05-03-2006, 04:06 PM
Good call, Stephan;
userschweiz, for future reference, floating an element acts like "shrink-wrapping" it: without a set width, the width will shrink down to the smallest amount capable of holding the content (while respecting any margins and padding, of course).

05-03-2006, 04:24 PM
Thank you :thumbsup:

Great forum!