Results 1 to 5 of 5

Thread: Sliding doors vertical menu- IE white gap

  1. #1
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sliding doors vertical menu- IE white gap

    re: Vertical Sliding Doors:
    http://www.dynamicdrive.com/style/cs...vertical-menu/

    Problem:
    In IE6, a white gap appears under each menu option, while there is no white gap in Firefox.

    How do I remove the white gap for IE browsers?

    example here:
    http://ewebs.com/dd/test.html

    Thankyou for your help

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    There is a deliberate white border beneath each menu item. Try removing this line:

    Code:
    border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */

  3. #3
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i have completely removed this CSS line, and it makes no difference:

    (as per the example)
    http://www.ewebs.com/dd/test.html

    The white border seems to be an IE interpretation of the CSS, as opposed to the white border feature already in that menu.

    ..any other tips?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <style type="text/css">
    
    
    li {margin:0;padding:0}
    
    .slidedoormenu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 181px; /* width of menu (don't forget to add border with below!) */
    border-left: 8px solid #FFCA19; /* thick left border of menu */
    }
    
    .slidedoormenu li{
    border-bottom: 1px solid #978f75; /* Gray border beneath each menu item */
    }
    
    .slidedoormenu li a{
    background: white url(http://www.ewebs.com/dd/vstrip2.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
    font: 11px "Verdana","helvetica","Arial";
    display: block;
    color: black;
    width: auto;
    padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
    text-indent: 8px;
    text-decoration: none;
    }
    
    .slidedoormenu li a:visited, .slidedoormenu li a:active{
    color: black;
    }
    
    .slidedoormenu li a:hover{
    background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
    color: black;
    }
    
    .slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
    border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
    }
    
    .slidedoormenu li.lastitem a{
    padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
    }
    
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    .slidedoormenu li a {
    padding:4px 0!important;
    }
    .slidedoormenu li.lastitem {
    margin-bottom:-19px;
    }
    </style>
    <![endif]-->
    
    <body>
    <ul class="slidedoormenu">
    <li><a href="http://www.dynamicdrive.com/">Your Yearbook</a></li>
    <li><a href="http://www.dynamicdrive.com/">Browse Ideas</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" >How to Create</a></li>
    <li><a href="http://www.javascriptkit.com/jsref/">Prices</a></li>
    <li class="lastitem"><a href="http://www.javascriptkit.com/domref/">Getting Started</a></li>
    </ul>
    </body>
    </html>
    Last edited by jscheuer1; 04-02-2007 at 05:42 AM. Reason: Remove Vestigial Comment
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks John.

    Much appreciated.

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
  •