I'm trying to employ the Perfect 'Left Menu' 2 Column Liquid Layout by Matthew James Taylor and ajax accordian for a menu and get them to play together nicely. I have what I want in IE7, but can't get it to work in IE6 and FF3. I'd really appreciate some help - been beating my head against it for a week now. Notice in IE7 how the selected header menu item is a different background color. In IE6, the selected header menu doesn't have a different background color and there's too much top space around the ul items in the content area of the accordian. In FF3, I could live with it fine if the text for the header menu items was up by the arrow image.



Here's the css and a little bit of the ajax accordian to give you an idea. I'm not very good with css, so be kind:

Code:
/* 'widths' sub menu */
#layoutdims {
clear:both;
float:right;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative;/* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;/* width of whole page */
overflow:hidden;/* This chops off any overhanging divs */
border-left:solid 1px #000000;
border-right:solid 1px #000000;

}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}

/* 2 Column (left menu) settings */
.leftmenu {
background:#fff;/* right column background colour */
}

.leftmenu .colleft {
right:75%;/* right column width */
background:#DCE9E8;/* left column background colour */
font: 11px Verdana, Helvetica, sans-serif;
}

.leftmenu .col2 .accordianHeader 
{
border:none;
color:#265C58; 
font: 11px Verdana, Helvetica, sans-serif;
text-decoration:none; 
cursor:pointer; 
line-height:normal;
}

.leftmenu .col2 .accordianHeader a 
{
border:none;
margin: 1px 0 0 0; 
padding:2px 0 2px 1px; 
color:#265C58; 
font: 11px Verdana, Helvetica, sans-serif; 
text-decoration:none; 
cursor:pointer; 
}
.leftmenu .col2 .accordianHeader a:hover 
{
border:none;
margin: 1px 0 0 0; 
padding:2px 2px 2px 1px; 
color:#593F72; 
font: 11px Verdana, Helvetica, sans-serif;
text-decoration:none; 
background:#F9F9E4;
cursor:pointer;
}

.leftmenu .col2 .accordianHeaderSelected  a 
{
border:none;
color:#593F72; 
font: 11px Verdana, Helvetica, sans-serif;
text-decoration:none; 
cursor:pointer;
background:#EDF5F4;
border-bottom:dotted 1px #593F72;
}

#menuHeader 
{
clear:both;
list-style: none;
margin:0;
padding:0 0 0 12px;
width: 11em;
font: 11px Verdana, Helvetica, sans-serif;
background:url("../images/arrow1.gif") left center no-repeat;
line-height:normal;
}

#menuHeader a {
border:none;
color: #265C58;
display: block;
margin:0;
padding:2px 2px 2px 12px;
text-decoration: none;
font-weight:normal;
line-height:normal;
}
#menuHeader a:hover {
color: #000000;
background:#F9F9E4;
line-height:normal;
}

.leftmenu .bold 
{
color: #265C58; 
font:11px Verdana, Helvetica, sans-serif;
font-weight:bold;
padding:0 0 0 5px; 
}
#menu  
{
clear:both;
background: #EDF5F4;
list-style: none;
margin: 0 0 0 15px;
padding: 0;
width: 11em;
}
#menu li {
font: 11px Verdana, Helvetica, sans-serif;
margin:0;
padding:0;
line-height:normal;
}
#menu a {
background: #EDF5F4;
border-bottom: 1px solid #DCE9E8;
color: #265C58;
display: block;
margin: 0;
padding:2px 2px 2px 12px;
text-decoration: none;
font-weight:normal;
}
#menu a:hover {
background: #F9F9E4 url("../images/arrow1.gif") left center no-repeat;
color: #000000;
}  

.leftmenu .col1 {
width:71%;/* right column content width */
left:102%;/* 100% plus left column left padding */
}
.leftmenu .col2 {
width:21%;/* left column content width (column width minus left and right padding) */
left:6%;/* (right column left and right padding) plus (left column left padding) */
font-size:12px;
}
<div class="colmask leftmenu">
<div class="colleft">
<div class="col1">
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start --><br />
<ajaxToolkit:Accordion ID="Accordion1" runat="server"  
   FadeTransitions="true" TransitionDuration="250" FramesPerSecond="50" 
   ContentCssClass="AccordianContent" 
   HeaderCssClass="accordianHeader" 
   HeaderSelectedCssClass="accordianHeaderSelected">
   <Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane0" runat="server">
  <Header><span id="menuHeader">
  <a href="#" onmouseover="Openpane('0',event)">
  Contacts, Directions</a></span></Header>
  <Content>
  <ul id="menu">
  <li><a href="default.aspx?a=0">Overview</a></li>
  <li><a href="default.aspx?a=0">Staff Directory</a></li>
  <li><a href="default.aspx?a=0">Area Information</a></li>
  <li><a href="default.aspx?a=0">Employment (Jobs)</a></li>  
  <li><a href="default.aspx?a=0">Links</a></li>  
  <li><a href="default.aspx?a=0">Maps & Directions</a></li> 
  <li><a href="default.aspx?a=0">Website Information</a></li></ul>
  </Content>
  </ajaxToolkit:AccordionPane>
  <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"  ContentCssClass="accordianContent">
  <Header><span id="menuHeader">
  <a href="#" onmouseover="Openpane('1',event)">
  Continuing Education</a></span></Header>
  <Content>
  <ul id="menu">