CMS Made Simple Forums

The stylesheet below works perfectly in FireFox, but not in Internet Explorer 6.  I know that each browser has its own set of quirks, and IE tends to be a pain in the azz to work with.  But I do not see anything in this stylesheet that should cause problems in IE.

The issue is that each menu item should get an orange background image on hover.  It works in FF, but not IE.  The orange background also appears for the active page; this part works in both browsers.

Does anyone else see something I'm missing?  This is a stock stylesheet included with CMSMS 1.5.3.  All I did was swap out the images and make a couple of other minor adjustments (colors, etc.), but nothing that should have broken compatibility with IE.  Perhaps it never worked with IE, even before my mods, and I just didn't know it.

Thanks in advance.


/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
   /* Fix for Opera 8 */
   /*   overflow: hidden;  */
/*  background-color: #000000; /*#ECECEC;*/*/
   border-bottom: 1px solid /*#C0C0C0*/;
   width: 100%;
}

/* Set the width of the menu elements at first level. JKM */
#primary-nav li {
   width: 90px;
   padding-left: 5px;
   padding-right: 5px;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
#primary-nav ul ul {
   margin-top: 1px;
   margin-left: -1px;
   left: 100%;
   top: 0px;
}

#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav li li {
   margin-left: 0px;
   margin-top: -1px;
   float: none;
   position: relative;
}

/* Styling the basic appearance of the menu elements */
#primary-nav a {
   display: block;
   margin-left: 0px;
   padding: 0px 10px;
   text-decoration: none;
   color: #FFFFFF; /*text color*/
   font-weight: bold;
   text-align: center;
}
#primary-nav li a {
/*   border-right: 1px solid #C0C0C0;
   border-left: 1px solid #C0C0C0;*/
}
#primary-nav li li a {
  border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
   background-color: #000000;
}

/* Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
   background: url('uploads/images/m1-1.gif') no-repeat;
   background-position: center center;
   background-color: #000000; /*#FF7100;*/
   color: #000000;
}


/* Styling the basic appearance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
   background: url('uploads/images/m1-1.gif') no-repeat;
   background-position: center center;
   background-color: #000000; /*#FF7100;*/
   color: #FFFFFF;
}


/* Styling the appearance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
   background: url('uploads/images/m1-1.gif') no-repeat;
   background-position: center center;
   background-color: #000000; /*#FF7100;*/
   color: #FFFFFF;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}


/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}

Did you look in the template that that menu css comes from, perhaps your missing something it has in the head?...

Maybe reading the default content will help...

http://multiintech.com/defaultcontent/i ... nu-manager

Mark - thank you!!  and I apologize for missing something so simple.  I had actually remembered something about JS being required for IE, but forgot all about it when I was creating this post...

Very much appreciate the help!!