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/

http://www.dubbahdesign.com/menu_ie6_issue.jpg

Thanks in advance.

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.

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.

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

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;
}

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;
}

---

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....;)

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.

Quote:

---

.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?

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

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

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.