Results 1 to 10 of 10

Thread: All Levels Navigational Menu subs IE6 spacing

  1. #1
    Join Date
    Feb 2009
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default All Levels Navigational Menu subs IE6 spacing

    1) Script Title: All Levels Navigation Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem: Using sidebar with subs, IE6 puts in extra space in every item that has a sub to it. Other browsers are fine. I've tried all sorts of CSS and IE6 conditional statements, but I can't seem to get this one.
    I've inserted an image, but if it doesn't show up, here's a live url (must be viewed in IE6 to show the problem. People > Faculty shows it well.) http://www.somas.stonybrook.edu/



    Thanks in advance.

  2. #2
    Join Date
    Feb 2009
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Followup info

    I forgot to mention that I did have a workaround that is okay, but it would still be nice to fix it. On another menu project (not the one in my example) I added a background color to the .markermenu ul in the sidebar css to fill in the gap. It's not noticeable except on rollover - if the background color changes, you can see the gaps.

  3. #3
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    There are a few "quirks" in the layout of the menu in IE6, the space you described above being one of them. At the time of coding the menu I did try and resolve it, but was unsuccessful. The next time I update the menu I'll try and take another stab, but in the meantime, it's unfortunately up to you to mess with the CSS to try and come up with a solution. Fixing CSS bugs in IE is an absolutely frustrating experience.
    DD Admin

  4. #4
    Join Date
    Feb 2009
    Posts
    17
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thank you. Yes, fixing IE bugs is very frustrating.
    For now, I'm using the background color fix.

  5. #5
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Hi I have solution.

    Add "#display: inline-block;" into ddsubmenustyle will solve the IE Gap problem.

    .ddsubmenustyle li a{
    display: block;
    #display: inline-block; /*Fix the IE Gap problem*/
    width: 125px; /*width of menu (not including side paddings)*/
    color: black;
    background-color: #eeeeee;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

  6. The Following User Says Thank You to gensoftmy For This Useful Post:

    Rob22 (07-16-2009)

  7. #6
    Join Date
    May 2009
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    one of the solutions i found in the CSS code is to set the height in the li

    Code:
    .glossymenu ul li a{
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 19px*/
    text-decoration: none;
    font-weight: bold;
    height:12px;
    }

  8. The Following User Says Thank You to racerxfactor For This Useful Post:

    Rob22 (07-16-2009)

  9. #7
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ugly browsers require ugly fixes ;)

    I created this CSS class for IE6 and I apply it to all of the LI's that follow a LI that is a parent.

    Here is the class for ddlevelsmenu-base.css....

    Code:
    * html .ddsubmenustyle li.followsParent
    {
    	margin-top:-3px; /*the amount of spacing that IE6 throws in there */
    }
    Here is a sample of the usage...

    Code:
    <ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="#">Item 1a</a></li>
    <li><a href="#">Item 2a</a></li>
    <li><a href="#">Item Folder 3a</a>
     <ul>
      <li><a href="#">Sub Item 3.1a</a></li>
      <li><a href="#">Sub Item 3.2a</a></li>
      <li><a href="#">Sub Item 3.3a</a></li>
      <li><a href="#">Sub Item 3.4a</a></li>
      </ul>
     </li>
    <li class="followsParent"><a href="#">Item 4a</a></li>
    <li><a href="#">Item Folder 5a</a>
      <ul>
      <li><a href="#">Sub Item 5.1a</a></li>
      <li><a href="#">Item Folder 5.2a</a>
        <ul>
        <li><a href="#">Sub Item 5.2.1a</a></li>
        <li><a href="#">Sub Item 5.2.2a</a></li>
        <li><a href="#">Sub Item 5.2.3a</a></li>
        <li><a href="#">Sub Item 5.2.4a</a></li>
        </ul>
      </li>
     </ul>
    </li>
    <li class="followsParent"><a href="#">Item 6a</a></li>
    </ul>
    Not the best solution, but one that worked for me as none of the previously mentioned solutions worked in my scenario. I hope this helps someone.

    IE6 is the new NN4...it's the Windows ME of browsers...need I go on....

  10. #8
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Similar Problem

    I'm having a similar problem here:
    http://www.icatacademy.com/test.shtml

    Except my problem is taking place in both FireFox and Internet Explorer. This happens with both "block" and "inline-block" used for the display setting.

    .glossymenu, .glossymenu li ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 168px; /*WIDTH OF MAIN MENU ITEMS*/
    height: 25px;
    border: 0px;
    }

    .glossymenu li{
    position: relative;
    }

    .glossymenu li a{
    font: bold 8px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: 168px;
    height: 25px;
    text-decoration: none;
    }

    .glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    width: 168px; /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
    }

    .glossymenu li ul li{
    float: left;
    }

    .glossymenu li ul a{
    width: 168px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
    }

    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }

    /* Holly Hack for IE \*/
    * html .glossymenu li { float: left; height: 0%; }
    * html .glossymenu li a { height: 0%; }
    /* End */
    Help?

  11. #9
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Does anyone know how I could fix the problem with the menu bar on this page?

    http://www.icatacademy.com/test.shtml

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Many scripts offered from Dynamic Drive change over time, for this and general board policy reasons, please start a new thread for your possibly new question.
    - John
    ________________________

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

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
  •