Results 1 to 3 of 3

Thread: verticla spacing in menu with submenu

  1. #1
    Join Date
    Aug 2008
    Location
    London
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default verticla spacing in menu with submenu

    I have a vertical menu with a submenu. Unfortunately the spacing between main links and links in the submenu is slightly different. I attached an image to illustrate what i mean. How can I make the vertical spacing between submenu items the same as in the main menu? Thank you.

    html code
    -------------------------------------------------------------
    <div id="sidebar1">
    <a class="menusingleitem" href="#">Home</a>
    <a class="menusingleitem header" href="#">About TreatOA</a>
    <div class="subitems">
    <ul>
    <li><a href="#">Consortium</a></li>
    <li><a href="#">Aims</a></li>
    <li><a href="#">Work Packages</a></li>
    <li><a href="#">Scientific Advisory Board</a></li>
    </ul>
    </div>
    <a class="menusingleitem" href="#">About OA</a>
    <a class="menusingleitem" href="#">About genetics of OA</a></div>
    ------------------------------------------------------------------
    css
    -----------------------------------------------------------------
    #sidebar1 a.menusingleitem {
    display: block;
    position: relative;
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    color: #000000;
    }

    #sidebar1 .subitems ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #sidebar1 .subitems ul li a {
    display: block;
    padding: 0 0;
    text-decoration: none;
    padding-left: 20px;
    color: #000000;
    }
    --------------------------------------------------------------

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    What browser are you using? I tried your code in FF and IE and I didn't get any extra spacing. Please post the entire page.
    PS. you have a typo in the headline (verticla)
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Aug 2008
    Location
    London
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks for looking into this. I tried with ie6 and mozilla 1.0.7. the spacing is different between the items in the main menu and the items in the submenu. the link to my test page is: http://www.treatoa.eu/menu_test1.html

    html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/test.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="sidebar1">
    <a class="menusingleitem" href="#">Home</a>
    <a class="menusingleitem header" href="#">About TreatOA</a>
    <div class="subitems">
    <ul>
    <li><a href="#">Consortium</a></li>
    <li><a href="#">Aims</a></li>
    <li><a href="#">Work Packages</a></li>
    <li><a href="#">Scientific Advisory Board</a></li>
    </ul>
    </div>
    <a class="menusingleitem" href="#">About OA</a>
    <a class="menusingleitem" href="#">About genetics of OA</a>
    <a class="menusingleitem" href="#">News</a>
    <a class="menusingleitem" href="#">Publications</a>
    <a class="menusingleitem" href="#">Events</a>
    <a class="menusingleitem" href="#">Links</a>
    <a class="menusingleitem" href="#">Contact Us</a>
    </div>
    </body>
    </html>

    css:

    @charset "utf-8";
    /* CSS Document */
    #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EDECE8; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    margin-top: 10px;
    font-weight: bold;
    }

    #sidebar1 a.menusingleitem {
    display: block;
    position: relative;
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    color: #000000;
    }

    #sidebar1 .subitems ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    #sidebar1 .subitems ul li a {
    display: block;
    padding: 0 0;
    text-decoration: none;
    padding-left: 20px;
    color: #000000;
    }

Tags for this Thread

Bookmarks

Posting Permissions

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