hi
i have a dropdown menu that works fine in firefox, opera and safari but doesnt work in explorer (i am testing on an old pc with IE6). even the rollover doesnt show up as a link when you roll over. i have attached the zipped html file w/ css inserted for ease of reference. any suggestions would be MOST appreciated!
I don’t have a solution for you, but I remember reading within the last year that most developers have dropped support for IE6. According to the w3c IE6 currently makes up less than 5% of the total IE users (http://www.w3schools.com/browsers/browsers_explorer.asp) So are you sure you want to bang your head against the wall to fix something for such a small group. Start testing in IE7, I’ve found most of my bugs to be in 7 and then everything works fine in 8.
Hope that helps in some way.
The W3C don’t track browser usage. The site you linked to is just a badly maintained site where the target audience is most likely to be running more modern browsers. The actual percentage of IE6 users is likely to be around three or four times what that very specialised site gets since the sort of people looking for the information that site provides are the sort of people who already know how important that it is to keep your browser up to date.
w3schools is to W3C as Hamburg is to ham.
well thank you for pointing that out stephen, but i was merely trying to suggest that IE6 is in such a limited amount of use that it may not be worth the head banging stors is going through to support it.
i’m glad you got to feel superior today. i might rethink using this forum for help if these are the kinds of responses people get.
hope someone out there has a solution for stors, didn’t mean to hijack your thread.
Not wishing to go off-topic, but the following link is interesting regarding IE6 use around the world.
http://www.webdesignerdepot.com/2010/08/will-the-real-browser-stats-please-stand-up/
Off Topic:
I agree.
I stopped supporting IE6 about 18 months ago now. Sure users can choose, or they may not have any choice, to use IE6 but then I can choose to not support it 
great comments everyone, but back to topic…anyone have any suggestions?
The menu uses li.menu:hover to reveal the dropdown. IE6 only supports :hover on anchors. Search for “IE hover fix”.
The “Menu” anchor does not show as a link because it has no href attribute.
Sorry to be brief but it’s past my bedtime.
Hi,
As mentioned above you need the IE6 Js helper (google suckerfish menus). You are also using position:fixed which is a bit of a worry because that doesn’t make any sense in that context and IE6 doesn’t understand fixed positioning anyway.
IE6 doesn’t understand min-width either which means you have put a lot of things in place that Ie6 doesn’t understand
You also seem to have made it overly complicated with all the extra nestings unless you are going to be using them for something special. Here are a couple of examples that you can de construct:
http://www.pmob.co.uk/temp/drop-down-basic-good.htm
http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm
Rather than using display:none they hide the elements off screen and them bring them back which is good all around an especially for accessibility (of course drop downs need a lot more work than this to make them completely accessible).
Here is the js routine added to your code but it still won’t display the same in IE6 due to the reasons mentioned above but you shuld be able to work soemthing out from here.
<!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=UTF-8" />
<title>Untitled Document</title>
<style>
#nav {
height:30px;
min-width:960px;
position:relative;
}
* html #nav {
width:960px;
margin:auto;
}
#nav ul {
height:30px;
margin:0 auto;
position:relative;
width:960px;
padding:0;
list-style:none;
}
#nav ul li {
float:right;
height:30px;
width:auto;
list-style-type:none;
}
#nav ul li a.primary {
color:#ce181e;
display:block;
float:right;
font-size:12px;
height:30px;
overflow:hidden;
line-height:30px;
padding:0 20px;
text-decoration:none;
}
#nav ul li a.primary:hover {
color:#333333;
}
#nav ul li.menu:hover, #nav ul li.over a {
background-color:#f1f2f2; /* primary link background color */
}
#nav ul li.menu:hover a.primary, #nav ul li.menu.hover a.primary {
color:#ce181e;
}
#nav ul li.menu .drop-down {
background-color:#f1f2f2; /* full bar */
display:none;
position:absolute;
position:fixed;
margin-top:30px;
left:0px;
overflow:hidden;
padding-top:30px;
padding-bottom:35px;
width:100%;
z-index:100;
}
#nav ul li.menu:hover .drop-down, #nav ul li.menu.over .drop-down {
display:block;
}
#nav ul li.menu .drop-down .box {
width:960px;
margin: 0 auto;
}
#nav ul li.menu .drop-down .group {
float:left;
width:165px;
}
#nav ul li.menu .drop-down .group .title {
color:#333333;
font-size:16px;
font-weight:bold;
padding-bottom:5px;
}
#nav ul li.menu .drop-down .group .title a {
color:#333333;
text-decoration: none;
background-color: transparent;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
}
#nav ul li.menu .drop-down .group .title a:hover {
text-decoration: none;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
color:#ce181e;
}
#nav ul li.menu .drop-down .group .description {
color:#333333;
font-size:11px;
line-height:15px;
margin-bottom:10px;
margin-left:0;
margin-right:0;
margin-top:3px;
}
#nav ul li.menu .drop-down .group .link {
font-size:12px;
font-weight:normal;
padding-top:6px;
}
#nav ul li.menu .drop-down .group .link a {
color:#505050;
text-decoration:none;
}
#nav ul li.menu .drop-down .group .link a:hover {
text-decoration: none;
border-color: #333333;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-style: dotted;
color:#ce181e;
}
#nav ul li.menu .drop-down .gap {
float:left;
height:200px;
width:15px;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<div id="nav">
<ul>
<li class="menu"> <a class="primary" title="choose a category!">menu</a>
<div class="drop-down">
<div class="box">
<div class="group">
<div class="title"><a href="#" title="About Us">About Us</a></div>
<div class="link"><a href="#" title="Introduction to Meadwell">Introduction</a></div>
<div class="link"><a href="#" title="Our Culture">Culture</a></div>
<div class="link"><a href="#" title="Our Strengths">Strengths</a></div>
<div class="link"><a href="#" title="What Makes Us Different">Different</a></div>
<div class="link"><a href="#" title="Services">Services</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
wow thanks for the great feedback. i really appreciate a great site like this where people come together to help solve problems instead of just boasting how great they are and how small you are (as i have found on many other forums). Thanks again and keep up the good work! one further question actually, that i am currently trying to solve: the dropdown menu is full screen width on all browsers still, but the ie6 dropdown is only staying at 960px wide (not full screen which it should). any idea how i can resolve this?
Hi,
It gets very complicated to do that in IE6 (if I understand correctly) as IE will treat 100% for the absolute element as 100% of the parents width which is only 960px.
You’d have to do something like this.
<!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=UTF-8" />
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0
}
ul {
margin:0;
padding:0;
list-style:none;
}
#navwrap {
width:100%;
position:fixed;
}
#nav {
height:30px;
margin:auto;
width:960px;
}
#nav li {
height:30px;
float:right;
}
#nav li li {
height:auto;
width:auto;
float:none;
}
p.ie6fix {
margin:0 auto;
height:30px;
}
#nav li a.primary {
color:#ce181e;
float:right;
font-size:12px;
height:30px;
overflow:hidden;
line-height:30px;
padding:0 20px;
text-decoration:none;
}
#nav li a.primary:hover {
color:#333333;
}
#nav li.menu:hover a.primary, #nav li.over a.primary {
background-color:#f1f2f2; /* primary link background color */
}
#nav li.menu:hover a.primary, #nav li.over a.primary {
color:#ce181e;
}
#nav li.menu .drop-down {
position:absolute;
margin-top:-999em;
left:0;
overflow:hidden;
right:0;
z-index:100;
height:auto;
width:100%;
padding:30px 0 35px;
background-color:#f1f2f2; /* full bar */
}
#nav li.menu:hover .drop-down, #nav li.over .drop-down {
margin-top:0px;
}
#nav li.menu .drop-down .box {
width:960px;
margin: 0 auto;
}
#nav li.menu .drop-down .group {
float:left;
width:165px;
}
#nav li.menu .drop-down .group h3 {
color:#333333;
font-size:16px;
font-weight:bold;
padding-bottom:5px;
margin:0;
}
#nav li.menu .drop-down .group h3 a {
color:#333333;
text-decoration: none;
background: transparent;
border-bottom:1px dotted #333;
}
#nav li.menu .drop-down .group h3 a:hover {
text-decoration: none;
border-bottom:1px dotted #333;
color:#ce181e;
}
#nav li.menu .drop-down .group li {
font-size:12px;
font-weight:normal;
padding-top:6px;
float:none;
}
#nav li.menu .drop-down .group li a {
color:#505050;
text-decoration:none;
}
#nav li.menu .drop-down .group li a:hover {
text-decoration: none;
border-bottom:1px dotted #333;
color:#ce181e;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#nav {width:100%;}
#nav li {width:100%;}
p.ie6fix {width:960px;}
</style>
<![endif]-->
</head>
<body>
<div id="navwrap">
<ul id="nav">
<li class="menu">
<p class="ie6fix"><a class="primary" title="choose a category!">menu</a></p>
<ul class="drop-down">
<li class="box">
<ul class="group">
<li>
<h3><a href="#" title="About Us">About Us</a></h3>
</li>
<li><a href="#" title="Introduction to Meadwell">Introduction</a></li>
<li><a href="#" title="Our Culture">Culture</a></li>
<li><a href="#" title="Our Strengths">Strengths</a></li>
<li><a href="#" title="What Makes Us Different">Different</a></li>
<li><a href="#" title="Services">Services</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
cheers paul for all your effort on this. i really appreciate all your help. i can only hope one day to be somewhere in the neighbourhood of your skillset. if you are ever in canada, drinks on me.