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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Menu Issue in Mozilla

    Hi

    I have (with some help through this forum) created a menu / sub-menu in HTML and CSS. Two of the main menu items have sub-menus.

    The problem is that in Mozilla when only the main menu is displayed there is a gap after each main menu item that has a sub-menu. Those main menu items that don’t have a sub-menu have correct spacing to the next main menu item.

    This is only a problem in Mozilla (I’m using 3.6.3).

    I’ve included the CSS code below. I have messed around with various padding and margin properties setting them to zero but no luck.

    Any help is much appreciated.

    body {font-family: Arial, Helvetica, sans-serif;}

    a:link {color:black; text-decoration:none;}
    a:visited {color: black; text-decoration:none;}
    a:hover {color: black; text-decoration:none; background: url(Images/ShiftPoint_menu.jpg) no-repeat;}
    a img {border: 0;}

    #menu ul {position: absolute; list-style: none; top:150px; left: 0px; width: 138px; padding: 0px; margin: 0px; text-align: left; font-size: 12px; font-weight: bold;}

    #menu li {padding-left: 10px;}

    #menu ul li a {padding-left:1.5em;}

    #menu li ul {position: relative; top: 0px; left: 0px; font-size: 11px; font-weight: bold;}

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    can we have a link to the page please?

    Before using any more time, please ensure your page code is validated (validator.w3.org) so some errors caused through incorrect code are removed.

    I had a similar problem about a year ago but it was with IE6, which is why I reckon you may have invalid code. FF 3.6.3. was a doddle to make work similar to IE7. But in IE6, the vertical nav menu had extra spacing when there was a sub menu, which flew out with sub links eg

    Code:
    Menus
       -->Breakfast
       -->Lunch
       -->Dinner
    There was a gap beneath the Menus button where there was a sub menu. If no flyout were available there was no extra/added space. Solution was provided by Aero ( again), to assign a class to Menus button and assign padding-bottom to it.

    Dunno if that helps you but, it might give you a nudge.

    Code:
    * html #left ul li.sub {
      margin-bottom:-3px;
      }
    tweak it to fix the issue in whatever brower you have remembering that the '* html' is for IE6 only.

    for other browsers, use #left li.sub{} substituting 'left' with the name of your div - if there is one assigned.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    you might want to try to drop the positioning:absolute. always causes me trouble for no real gain.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Any help is much appreciated.
    If you don't have a server space, get a free one from freehostia.com and upload your files. Then post a link to it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    bazz - tried the margin-bottom piece, decreased the gap a little but didn't resolve. If I increased the -3px then this did close the gap, but when I when to menu item that had submenu, menu lines were displayed on top of each other.

    Went to the validator website, gave me some issues in the html file (although the error it is flagging I cannot see why a problem). Couldn't see how to validate the CSS file which I think is where my error is.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Couldn't see how to validate the CSS file which I think is where my error is.
    http://jigsaw.w3.org/css-validator/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, ran my CSS through that validator and all came back clean.


  •  

    Posting Permissions

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