...

View Full Version : Drop down menu too low in IE6



Lynn~
02-14-2008, 08:36 PM
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):



<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):




#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:
http://i89.photobucket.com/albums/k205/quistib/th_screenshotmin.jpg (http://i89.photobucket.com/albums/k205/quistib/screenshotmin.jpg)

Andrew Johnson
02-14-2008, 08:46 PM
Try adding the following:


.subuls
{
margin-top:-10px
}

jcdevelopment
02-14-2008, 08:52 PM
also add this to your css and see what it does




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

Andrew Johnson
02-14-2008, 08:56 PM
also add this to your css and see what it does




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




He is already setting his UL tags to that...

jcdevelopment
02-14-2008, 09:00 PM
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?

Lynn~
02-14-2008, 09:52 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum