1. Home
  2. Forums Index
  3. Browser Side / CSS 3:19 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

a problem with a drop-down menu

problem with the menu & the layout with ie6

         

eight8ball

7:26 pm on Mar 25, 2008 (gmt 0)

10+ Year Member



Hi! I'm absolutely stuck with this layout. I don't know what to do next. Evrything works fine with opera, firefox, ie7 and safari, but evrything is mixed up when i open the page with ie6 :( Especially when i move the cursor on one of those drop downs. Then somehow the height of #navigation raises couple of pixels and that totally mixes up the layout. Any suggestions how to fix this? thanks a lot!

index.html: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>yup</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="pro_dropdown_6.css" />
</head>
<body>
 <!-- Begin Wrapper -->
 <div id="wrapper">
 
  <!-- Begin Header -->
  <div id="header">
 
 This is the Header 
 
 </div>
 <!-- End Header -->
 <!-- Begin Left Link Navigation -->
 <div id="leftlinknavi">
 
 L L N
 
 </div>
 <!-- End Left Link Navigation -->
 <div id="linknavi">
 
 <a href="#nogo27" class="navi_link">Home</a> / <a href="#nogo27" class="navi_link">Products</a> / <a href="#nogo27" class="navi_link">Cameras</a> / 
 
 </div>
 <!-- End Link Navigation -->
 
 <!-- Begin Right Link Navigation -->
 <div id="leftlinknavi">
 
 R L N
 
 </div>
 <!-- End Left Link Navigation -->
 
 <!-- Begin Left Column Header -->
 <div id="leftcolumnheader">
 
 L C H
 
 </div>
 <!-- End Left Column Header -->
 
 <!-- Begin Navigation -->
  <div id="navigation">
<span class="preload1"></span>
 <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>Cameras</b></li>
<li><a href="#nogo3" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><b>Zoom</b></li>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
<li><b>Non standard</b></li>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><b>Accessories</b></li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>European</b></li>
<li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>City</b></li>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><b>District</b></li>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
<li><b>Worldwide</b></li>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul> 
 
 </div>
 <!-- End Navigation -->
 
 <!-- Begin Left Column Header -->
 <div id="rightcolumnheader">
 
 R C H
 
 </div>
 <!-- End Left Column -->
 
 <!-- Begin Left Column -->
 <div id="leftcolumn">
 
 Left Column
 
 </div>
 <!-- End Left Column -->
 <!-- Begin Content Column -->
 <div id="content">
 
  <a href="#">Lorem Ipsum</a> 
 
 </div>
 <!-- End Content Column -->
 
 <!-- Begin Right Column -->
 <div id="rightcolumn">
 
 Right Column
 
 <div class="clear"></div>
 
 </div>
 <!-- End Right Column -->
 
 
 
 </div>
 <!-- End Wrapper -->
 
</body>
</html>

MAIN.CSS: 


* { padding: 0; margin: 0; }
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 850px;
}
#header {
 color: #333;
 width: 848px;
 float: left;
 border: 1px solid #ccc;
 height: 120px;
 margin: 10px 0 0 0;
 background: #E7DBD5;
}
#navigation {
float: left;
 width: 554px;
 color: #333;
height: 35px; 
border: 1px solid #ccc;
 margin: 0;
 background: #BD9C8C;
}
#linknavi {
float: left;
 width: 554px;
 color: #333;
height: 22px; 
border: 1px solid #ccc;
 margin: 0;
 
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0;
 width: 554px;
 height: 425px;
 display: inline;
}
#leftlinknavi { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0;
 width: 145px;
 height: 22px; 
 float: left;
}
#rightlinknavi { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0;
 width: 145px;
 height: 22px; 
 float: left;
position: relative;
}
#leftcolumnheader { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0;
 width: 145px;
 height: 35px; 
 float: left;
}
#rightcolumnheader { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0;
 width: 145px;
 height: 35px; 
 float: left;
 position: relative;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0;
 width: 145px;
 height: 425px;
 float: left;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0 -2px 0 0;
 width: 145px;
 height: 425px;
 float: left;
 position: relative;
}
.clear { clear: both; }
.navi_link { 
 font-size:10px;
 font-family:arial, verdana, sans-serif;
}

pro_dropdown_6.css: 


/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.#*$!/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:35px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:10px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}
#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}
#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}
#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}
#nav :hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover 
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul, 
#nav li:hover > ul ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
#nav li:hover li:hover > li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

SuzyUK

8:37 pm on Mar 26, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi eight8ball

there really really is too much code here ;)

however the first thing I did was to isolate the menu itself and can see the IE6 probs just with that so if I could, I suggest reading the troubleshooting guide [webmasterworld.com] at the top of this forum

in there as the last point it says that

Navigation menus/Effects should be built in a separate page to make sure they're working as you'd expect before adding them into your layout page

now this one isn't working even separated out so I would suggest stripping to 1 x instance of the drop with less CSS if possible and start at the top of the list in that post with just the smallest sample.

I would be willing to take a further look if you haven't already got this answered elsewhere, does Stu (css play) not provide support for his menus?

-Suzy

SuzyUK

10:19 am on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE6 selector bug..

#nav ul,
#nav li:hover > ul ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

remove the rule in red, the other rules are taking care of compliant browsers too, IE6 does not parse entire rulesets if an advanced selector is in there too.

if you wanted this part of the rule (which I don't think is necessary) you would have to declare it separately.

eight8ball

10:50 am on Mar 27, 2008 (gmt 0)

10+ Year Member



Thanks a lot for your replies Suzy. I removed that rule and now the whole menu is working much better in IE6. Still have a little problem with the layout tho, the same thing i mentioned earlier. When I move the cursor on one of those drop down parts of the menu, it raises the height of the menu somehow and that messes up all the boxes below the menu (#leftcolumn, #rightcolumn and #content). Any tips where to start? i really wanna fix this :)

SuzyUK

11:46 am on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



your tip is ;)

#nav {padding:0; margin:0; list-style:none; height:35px; ....

#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom: 3px;}

the padding bottom on the span will increase the the height of the nav because of the IE6 (and below) stretching box behaviour, so you need to allow for the fact that the top bar is actually going to 38px high at times, which means the left and right column headers when they're 35px high aren't able to float/clear properly under the 38px high nav.

put some temp background colors on the #nav bar and the spans so you can see the spans overflowing properly in IE7 and also what happens when it stretches in IE6 ..

then increase the left/right column header heights to 38px and you'll see the "gap" it needs - it will be up to you whether you increase the sides or decrease all the link/span heights to suit your layout, the span is the clever bit that allows you to have a visual "gap" between the navbar and the drop.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:19 am May 2, 2026