I'm interning for an NGO in India and trying to fix their website, including updating their menu so it's not the last item on the page to load, and it's centered on the screen. Everything works well enough but when I try out my new menu in IE6, I get this weird error where the content below the menu is padded an extra 30px or so and the material in the right-most drop down appears on the far left of the screen, always visible. When I drop down the rightmost link ("Publications") the content appears both in the correct location and in the same spot on the far left of the screen, and changes color when I hover as well. It's tough to describe, so it would probably be best if you took a look:
visit http://sevamandir.org/a30/index.htm in your Internet Explorer 6 browser to see for yourself. I really appreciate your help. Also I'm using a 1000px wide monitor, if there's more hijinks going on outside that space I'd like to know about that too.
Here's the relevant code:
in the html head:
<script>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
text surrounding the menu - the menu is simply
<ul id="nav"><li></li></ul>
etc.
<!--begin catchphrase-->
<div style="float:left; height:27px; width:520px; margin:0px; font:16px Arial, Helvetica, sans-serif; font-weight:bold; color:#769841;">
Transforming lives through democratic & participatory development
</div>
<?php include("menu.php"); ?>
</div><!-- end header -->
<!--begin main
text div-->
<div id="maincontent">
Relevant menu CSS:
#nav, #nav ul {
font:bold 11px Verdana, sans-serif;
float: left;
width: 980px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #769841;
border-width: 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 140px; /*this is the total width of the upper menu*/
w\idth: 120px; /*this is the width less horizontal padding */
padding: 5px 10px 5px 10px; /*horiz padding is the 2nd & 4th items here - goes Top Right Bottom Left */
color: #ffffff;
background:#b6791e;
text-decoration: none;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: left;
padding: 0;
width: 140px; /*this needs to be updated to match top #nav a */
background:#b6791e;
}
#nav li:hover, #nav li a:hover, #nav li:hover a {
background:#769841;
}
#nav li:hover li a {
background:#ffffff;
color:#769841;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: bold;
border-width: 0.25em; /*green border around dropdown menu*/
margin: 0;
}
#nav li ul a {
background:#ffffff;
color:#769841;
}
#nav li li {
padding-right: 1em;
width: 13em;
background:#ffffff;
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover, {
background: #769841;
color:#ffe400;
}
#nav li a:hover, #nav li li a:hover, #nav li:hover li:hover, #nav li.sfhover a:hover {
background: #769841;
color:#ffe400;
}
