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;
}
