Forum Moderators: not2easy

Message Too Old, No Replies

white gap problem in ie6 - dropdown menu

         

graphixdept

4:47 pm on Mar 12, 2009 (gmt 0)

10+ Year Member



I have used a plugin called dhstmlgoodies slidedown menu for a very elaborate dropdown menu. works great, everywhere. except for ie6, where i have a white gap between <li>s at the same level. moving from level one to level two, no gap. multiple entries at level two... the gap. i just read the rules about posting (first time here!) so i dont want to overwhelm with code.. but here is the html from the source to give you an idea of how it works.

<div id="dhtmlgoodies_slidedown_menu"><!-- DIV 3-->
<div id="different"><a class="different" href="">Home</a></div><!-- DIV 4-->

<ul>
<li><a href="">Joint Intentions</a></li>

<li style="overflow:hidden;"><a href="">Article One</a></li>
<li><a href="">Article Two</a></li>
<li><a href="">Article Three</a>

<!--second level-->
<ul>
<li><a href="#a">A. Entry</a></li>
<li><a href="#b">B. Entry</a></li>
<li><a href="#c">C. Entry</a>
<!--third level-->
<ul>
<li><a href="#c1">1. Entry</a></li>
<li><a href="#c2">2. Entry</a></li>
<li><a href="#c3">3. Entry</a></li>
<li><a href="#c4">4. Entry</a></li>
</ul>
<!--//third level-->

and here is what i think is the relevent css:

#dhtmlgoodies_slidedown_menu li{
position:relative;
margin: 0px;
}

#dhtmlgoodies_slidedown_menu ul{
margin:0px;
padding:0px;
position:relative;
}

#dhtmlgoodies_slidedown_menu div{
margin:0px;
padding:0px;
}
/* All A tags - i.e menu items. */
#dhtmlgoodies_slidedown_menu a{
display:block;
clear:both;
padding:2px;

}

#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
margin-top:1px;
}
#dhtmlgoodies_slidedown_menu a.slMenuItem_depth1:link{ /* Main menu items */
margin-top:1px;
}

#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
margin-top:1px;
}
#dhtmlgoodies_slidedown_menu a.slMenuItem_depth2:link{ /* Sub menu items */
margin-top:1px;
}

thank you for whatever help anyone can offer!

CSS_Kidd

4:57 pm on Mar 12, 2009 (gmt 0)

10+ Year Member



One common issue with this is that IE wants a set width when It comes to block links when they are in a list.

Try this:

#dhtmlgoodies_slidedown_menu li a{
display:block;
width:100px; (or what ever)
clear:both;
padding:2px;
}

Make sure you apply this to the sub menus as well if needed.

graphixdept

6:55 pm on Mar 12, 2009 (gmt 0)

10+ Year Member



yes! that worked, along with some display:inline...
thank you!