Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navbar vertical instead of horizontal in Safari

    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:

    http://www.tradingmonk.com/testlauf.html

    Thank you for helping me out on this.
    Last edited by userschweiz; 04-26-2006 at 10:10 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    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:
    Code:
    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.

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Danke und schönen Abend!

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    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.

    Code:
    #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.

  • #6
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts


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

    Vielen Dank für die prompte Hilfe!

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shrink-wrapping

    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).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    New Coder
    Join Date
    Apr 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you

    Great forum!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •