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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop down menu too low in IE6

    I'm working on a horizontal main menu with rollover vertical drop down submenus. The menus function correctly in Opera, Firefox, Netscape, and Safari as tested on a Mac. The menu also works in IE 7 as tested on a PC.

    I have one remaining issue with IE6 (I'm not concerned with any of the lower IE browsers). The horizontal main menu appears correctly and the submenus appear inline beneath it, however there is a gap between the main menu link and its drop down menu. In other words, when the cursor is over the main link the drop down menu appears approximately 10 pixels too low beneath the main menu (please see screenshotmin.jpg). Once the cursor is moved down to access the submenu the submenu disappears because the main menu is no longer activated.

    I've included what code I think may be relevant but if something more would be helpful I'm happy to oblige. You'll note I incorporated IE hacks >cringe< to change the style display for IE 6. This was necessary to bring the horizontal main menu items inline (without which they stacked vertically in IE 6) but may also be the reason the submenus are no longer directly below the main menu. I've tried a few IE 6 specific hacks to raise the subuls but without success. I'm new to css and coding so I may simply be placing the hack on the wrong code portion.

    Suggestions? Any help is appreciated and thank you in advance.

    HTML (partial):
    Code:
    <ul id="cssdropdown">
    
    <li class="mainitems">
    <a href=index.htm class="nav">Home</a>
    </li>
    
    <li class="mainitems">
    <!--[if lte IE 6]><a href="http://www.cssdrive.com/index.php/examples/" class="nav" style="display: inline"><![endif]-->
    <a href="http://www.cssdrive.com" class="nav" style="display: block">Apparel</a>
    <ul class="subuls">
    <li><a href="" class="subnav">Button</a></li>
    <li><a href="" class="subnav">Polos</a></li>
    <li><a href="" class="subnav">Tees</a></li>
    </ul>
    </li>
    CSS (partial):

    Code:
    #cssdropdown, #cssdropdown ul 
    {
    padding: 0;
    margin: 0;
    list-style: none;
    float: right;
    z-index: 100;
    }
    
    #cssdropdown li 
    {
    float: left;
    position: relative;
    z-index: 100;
    }
    
    .subuls
    {
    display: none;
    text-align: left;
    position: absolute;
    width: 10em;
    top: 1.75em;
    left: 0;
    background-color: #698f92;
    border-top: 0px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    z-index: 100;
    }
    
    .subuls li
    {
    width: 100%;
    z-index: 100;
    }
    
    .subuls li a
    {
    text-decoration: none;
    color: #FFFFFF;
    z-index: 100;
    }
    
    
    #cssdropdown li>ul 
    {
    top: auto;
    left: auto;
    z-index: 100;
    }
    
    
    #cssdropdown li:hover ul, li.over ul 
    {
    display: block;
    z-index: 100;
    }
    Sample pic:

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Try adding the following:
    Code:
    .subuls
    {
       margin-top:-10px
    }

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    also add this to your css and see what it does

    Code:
    * {
    padding:0px;
    margin:0px;
    }

  • #4
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by jcdevelopment View Post
    also add this to your css and see what it does

    Code:
    * {
    padding:0px;
    margin:0px;
    }
    He is already setting his UL tags to that...

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, i didnt know if it would make a difference as a whole, as far as being relatively positioned. So adding it would make everything absolutely null of any padding and margin. But if its already added for the UL's then nevermind, i need to read before i post haha!!!

    on top of that, would writing it -10px, would that affect it in the other browsers?
    Last edited by jcdevelopment; 02-14-2008 at 09:03 PM.

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By the power of Grayskull - it worked!

    Andrew, you were on the right track. The problem was the "top: 1.75em;" in my ".subuls" list. I adjusted that to 1.3em and the submenu came up where it needed to be. It seems so obvious now...

    JC, your suggestion was a good one too. Although it was not the culprit this time I have had trouble in the past with those pesky padding/ margin settings.

    As to your question regarding the effect of -10px in the other browsers, I did try that setting and it seemed to have no effect in the more standard-friendly fellows nor was there any apparent change in IE 7. In IE 6 it moved the submenu up over the main navigation but that may have been because I had adjusted it too drastically. I believe adjusting the pixel value would result in a similar outcome as the 1.3em solution with a few trys.

    Thanks to you both for the help - I truly appreciate it!


  •  

    Posting Permissions

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