Hi,

I have this left menu navigation that works right in IE but not in Firefox. I can definitely tell that there is an error in my code because it should be the other way around. I have vertical css navigation.

The problem is:

1) I have 2 levels of sub navigation under the top level and below is the HTML and CSS that i use. But, for some reason, the sub navigations do not indent under their respective top level navigation in Firefox.

I am defining the overall div for the navigation as #sidebar_expansion.

The ul’s i am defining as classes (ul.subnavitem). But, for some reason, the firefox browser does not like ul.subnavitem but like ul#subnavitem which my portal software does not allow me to use. SO, i have to use ul as a class and not an id. Any thoughts?

CSS:

/* Expansion: */

#sidebar_expansion
{
  display: inline; 
  /*
  * Fixes IE6 double-margin bug *
  float: left; 
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  margin-top: 64px;
  */
  font-size: 70%; 
  width: 175px;
  padding-bottom: 100px;
  position: relative;
  left: -10px;
}

#sidebar_expansion ul
{
  list-style: none;
}

#sidebar_expansion li
{
  margin: 1px 0px 1px 0px;
  padding-left: 10px;
  padding-bottom: 3px;
  /* background: url(/imageserver/pensions/images/expansion_bullet.jpg) no-repeat 0;*/
}

/* The width keeps the rollover looking consistent */
#sidebar_expansion li a
{
  /*
  font-size: 80%;
  font-weight: bolder;
  text-transform: uppercase;
  */
  padding-left: 10px;
  color: #022076;
  text-decoration: none;
  width: 150px;
}

#sidebar_expansion ul.subnavitems li a
{
  width: 130px;
}

#sidebar_expansion ul.subsubnavitems li a
{
  width: 110px;
}

#sidebar_expansion li a:hover
{
  /*
  font-size: 80%;
  font-weight: bold;
  text-transform: uppercase;
  */
  color: #022076;
  text-decoration: none; 
  background-color: #ffffff;
}

#sidebar_expansion li a.current
{
  font-weight: bold;
  background-color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

#sidebar_expansion li.active
{
  margin: 0;
  padding: 6px 10px 0px 20px;
  font-weight: bolder;
  line-height: 0.8em;
  color: #fff;
  background: url(/imageserver/pensions/images/expansion_current_bkgd.jpg) no-repeat;
}

#sidebar_expansion li#active a
{
  font-size: 85%;
  color: #fff;
  font-weight: bolder;
  list-style: none;
}

#sidebar_expansion li.active a
{
  font-size: 81%;
  font-weight: bolder;
  padding: 6px 10px 0px 0px;
  color: #ffffff;
  list-style: none;
}

/**************** CUSTOM NAV *******************

#sidebar_expansion ul.topnavitems
{
  margin-top: 0;
  margin-left: 1px;
  background: #110000;
  /* padding: 4px 0 4px; */ 
}

#sidebar_expansion ul.subnavitems
{
  margin-top: 0;
  margin-left: 1px;
}

#sidebar_expansion ul.subsubnavitems
{
  margin-top: 0;
  margin-left: 1px;
  color: #000000;
}

#sidebar_expansion ul.topnavitems
{
  color: #669933;
}

/**************** END CUSTOM NAV *******************/

HTML:

<div id=“sidebar_expansion” >
      <ul class=“topnavitems”> 
     
               
              <ul class=“subnavitems”>

***************************************

Thanks a lot.