css drop down menu not working in ie8

KChalima 0 Newbie Poster

12 Years Ago

I use Suckerfish to create a drop down menu. It works perfectly well in FireFox, but IE8 is messing it up. It moves everything to the right and the submenu does not work. Furthermore, it seems to be placing the content of the page on top of the drop down menu.

I was wondering if anybody can help me.

This is my css:

/* NAVIGATION BUTTONS */
#menu {height: 21px;width:760px;background-color: #FFFFFF;text-align:left;margin: 0px auto 0px auto;padding:0px;}
#menu a:hover{color: #ffffff;}
#menu a:hover img{visibility:hidden}
* html a:hover {visibility:visible}

#Homemenu {height: 30px;width:760px;background-color: #FFFFFF;text-align:left;margin: 0px auto 0px auto;padding:0px;}
#Homemenu a:hover{color: #4B0D62;}
#Homemenu a:hover img{visibility:hidden}
* html a:hover {visibility:visible}


#subnavn, #subnavn ul {
    padding: 0;
    margin: 0;
            line-height:10px;
    list-style: none;
}
#subnavn a {
    display: block;
    width: 20em;
}
#subnavn li {
    float: left;
    width: 20em;
}

#subnavn li ul {
            border: 1px solid #4B0D62;
            background-image:url(images/submenu_bk.png);
            background-position:top right;
            background-repeat:repeat;
    position: absolute;
            display: none;
    width: 20em;
            top: 1em;
    left: -999em;
            padding: 10px 0 0 5px;
}
#subnavn li:hover ul, li.over ul {
            font-family: arial, helvetica, sans-serif;
            font-size: 10px;
            color: #4B0D62; 
            text-decoration: underline;
    left: auto;
            display: block;
            z-index: 6000;
}

#subnavn li > ul {
            top: auto;
            left: auto;
            }


#subnavn li:hover ul, #subnavn li.sfhover ul {
    left: auto;
            display: block;
}


#content {
            clear: left;
}


/* Define 1 .cssnav* classes w/o rollovers for static images*/
.cssnavstaticOne          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_static_02.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 189px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnavstaticOne a {display: block;color: #000000;font-size: 10px;width: 189px;height: 30px;display: block;float: left;color: #FFFFFF; text-decoration: none;}
.cssnavstaticOne img {width: 189px; height: 30px; border: 0; }


/* Define 6 .cssnav* classes w/rollovers*/

.cssnav1          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_05.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 122px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav1 a {display: block;color: #000000;font-size: 10px;width: 122px;height: 30px;display: block;float: left;color: #4B0D62; text-decoration: none;}
.cssnav1 img {width: 122px; height: 30px; border: 0; }

.cssnav2          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_06.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 114px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav2 a {display: block;color: #000000;font-size: 10px;width: 114px;height: 30px;display: block;float: left;color: #4B0D62; text-decoration: none;}
.cssnav2 img {width: 114px; height: 30px; border: 0; }

.cssnav3          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_07.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 58px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav3 a {display: block;color: #000000;font-size: 10px;width: 58px;height: 30px;display: block;float: left;color: #FFFFFF; text-decoration: none;}
.cssnav3 img {width: 58px; height: 30px; border: 0; }

.cssnav4          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_08.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 99px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav4 a {display: block;color: #000000;font-size: 10px;width: 99px;height: 30px;display: block;float: left;color: #FFFFFF; text-decoration: none;}
.cssnav4 img {width: 99px; height: 30px; border: 0; }

.cssnav5          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_11.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 70px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav5 a {display: block;color: #000000;font-size: 10px;width: 70px;height: 30px;display: block;float: left;color: #FFFFFF; text-decoration: none;}
.cssnav5 img {width: 70px; height: 30px; border: 0; }

.cssnav6          {position:relative;font-family: arial, helvetica, sans-serif;background-image:  url(images/top_menu/nav_on_10.gif);background-repeat: no-repeat;white-space: nowrap;display: inline;width: 108px;height: 30px;margin: 0; padding: 0;float: left;}
.cssnav6 a {display: block;color: #000000;font-size: 10px;width: 108px;height: 30px;display: block;float: left;color: #FFFFFF; text-decoration: none;}
.cssnav6 img {width: 108px; height: 30px; border: 0; }


/* END OF NAVIGATION */

The submenu is set up like this in the header.php:

<div class="cssnav1"><ul id="subnavn"><li><a href="<?php bloginfo('url'); ?>/?page_id=3"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/top_menu/nav_off_05.gif" width="122" height="30" border="0" alt="Why Fruits &amp; Veggies" title="Why Fruits &amp; Veggies" /></a><img src="http://www.fruitsandveggiesmorematters.org/wp-content/themes/moreFruitsAndVeggies/images/spacer_n.gif" height="30" border="0" alt="Why Fruits &amp; Veggies" />
        <ul>
        <li><a href="http://www.fruitsandveggiesmorematters.org/?page_id=115">Fruit & Vegetable Nutrition</a><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=1477">Top 10 Reasons to Eat MORE<br />Fruits & Vegetables</a><br /><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=129">Fruit & Vegetable Storage 101</a><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=9171">In the News: Fruits & Vegetables</a><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=825">Nut Nutrition Database</a><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=48">Diet & Exercise: The Role of<br />Fruits & Vegetables</a><br /><br /><br />
        <a href="http://www.fruitsandveggiesmorematters.org/?page_id=9">About Us</a></li></ul></li></ul></div>

And I have added this script to the header.php:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    var sfEls = document.getElementById("subnavn").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>

I would greatly appreciate it if anybody can help me.

Thanks

web-design

1 Contributor
0 Replies
44 Views

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.