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/aboutus.htm in your IE6/IE7 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.
I took a look at
the problem again and it's even weirder than I thought. Only two letters of
the bottom-most drop down menu item are shown, no matter
how many items are in
the left-most drop down menu. When I delete
the left-most drop down menu,
the bottom item from
the next left-most item shows up in
the same space.
The padding between
the menu and
the content is always
the same. When I hover over
the real menu item,
the two letters on
the left hand side
change color
to match
the hover color.
Unfortunately many people that visit our website are using old browsers so IE6 support is pretty crucial, this problem is really weird though, and I would appreciate some help.
I uploaded a file with
the entire style.css sheet in
the and HTML code below, at http://sevamandir.org/a30/aboutus.htm.
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;
}
