I need it so the active tab is the darker version of the tab for the "active" and the others would be the Lighter....

I swear I have tried every option to do this and I am missing something...

Working

Not Working


The Hover is working fine on the one, Still need Active tab inactive Tab Trigger...

I copied the "Working Code" to production Page and now that isn's working..




Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- TABBED CSS BOXES -->
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>
<!-- TABBED CSS BOXES -->

<style>
/* This is the Tabbed Description */


#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: Arial;
}

 to stretch the container div to contain floated list 
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;

}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 770px;
}

ul#navlist li
{
	display: block;
	float: left;
	width: 154px;
	height: 20px;
	margin: 0;
	padding: 0;

	text-align: left;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer; 
}

ul#navlist li a
{
	display: block;
	width: 154px;
	height: 20px;
	vertical-align: middle;
	background-image: url(http://209.98.72.233/HTMLDsgn/images/tabBG.jpg);
	background-repeat: no-repeat;
	padding-top: 3px;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer; 
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
	width: 154px;
	height: 20px;
	vertical-align: middle;
	background-image: url(http://209.98.72.233/HTMLDsgn/images/tabBG.jpg);
	background-repeat: no-repeat;
	padding-top: 3px;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer; 
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
	width: 154px;
	height: 20px;
	vertical-align: middle;
	background-image: url(http://209.98.72.233/HTMLDsgn/images/tabBGlt.jpg);
	background-repeat: no-repeat;
	padding-top: 3px;
	text-align: left;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer; 
}



.product_desc_detail{
	width: 770px;
	height: auto;
	margin-top: 10px;
	text-align: left;
	
	
	}


.mybox { 
	width: auto; 
	height: auto;
	background-color: #e3e3e3;
	border-color:#999; 
	border-style:solid; 
	border-width:1px; 
	padding:10px; 
	text-align: left;
	font-family: Arial;
	font-size: 12px;
 
}

.mybox a { 
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #039;
	text-decoration: underline;
}




/* End Tabbed Description */

</style>
</head>

<body>

<div class="product_desc_detail">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>
                    <div>
<ul id="navlist">
<li><a onclick="DisplayDIV('1');HideDIV('2');HideDIV('3')"><span style="padding-left: 8px;">Description</span></a></li>
<li><a onclick="HideDIV('1');DisplayDIV('2');HideDIV('3')"><span style="padding-left: 8px;">Highlights</span></a></li>
<li><a onclick="HideDIV('1');HideDIV('2');DisplayDIV('3')"><span style="padding-left: 8px;">Specifications</span></a></li>
<li style="display: none;"><a onclick="HideDIV('1');DisplayDIV('2');HideDIV('3')"><span style="padding-left: 8px;">FAQ</span></a></li>
<li style="display: none;"><a onclick="HideDIV('1');HideDIV('2');DisplayDIV('3')"><span style="padding-left: 8px;">Reviews</span></a></li>
</ul>
</div>
                    </td>
                 
                  </tr>
                  <tr>
                 
                
                <td colspan="3" align="right" valign="top">
                 
                <!-- TAB 1-->
                <div id="1" class="mybox" style="display: block; ":>
                  <div>
                    <div id="descriptionshort">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis   leo quis velit volutpat imperdiet. Donec sollicitudin, dolor id rutrum iaculis,   nisi urna congue nisi, at sagittis diam odio id ligula. Donec commodo accumsan   lectus, vel fringilla dolor sagittis vitae. Aenean eget metus id mauris pulvinar   vehicula. Ut id dolor nec tortor tristique bibendum quis in sem. Nam convallis   lorem vitae dolor vulputate sit amet tempus nisi blandit. Quisque non nunc   justo, interdum dignissim mauris. Integer dui nulla, hendrerit id aliquam in,   tristique vel nulla. In consequat nisl sit amet risus gravida imperdiet. Nunc   pellentesque varius dolor, eu sollicitudin nisi bibendum sed. </p>
                      <p>Cras nec leo quis tortor congue porttitor a ut mi. Vestibulum tortor nisl,   feugiat vitae venenatis ac, posuere ac sapien. Vestibulum at velit dui. Ut   mollis, sapien blandit accumsan congue, mi metus egestas enim, in dictum ligula   leo quis lorem. Integer nec quam purus. Proin non sem sed lacus consectetur   elementum ac vel est. Integer tristique fermentum scelerisque. Fusce a eleifend   augue. Proin vitae sem magna, non mollis felis. Etiam luctus ullamcorper libero   non semper. Vestibulum vehicula, dolor et egestas tincidunt, lectus dui   vestibulum neque, et viverra orci mauris sit amet ipsum. Class aptent taciti   sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.   Phasellus rhoncus viverra enim eu facilisis. </p>
                      <br /><br />
                    
                    
                    
                    </div>


				  </div>
                </div>
                 
                <!-- TAB 2 -->
                <div id="2" class="mybox" style="display:none;":>
                  <div >
                 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis leo quis velit volutpat imperdiet. Donec sollicitudin, dolor id rutrum iaculis, nisi urna congue nisi, at sagittis diam odio id ligula. Donec commodo accumsan lectus, vel fringilla dolor sagittis vitae. Aenean eget metus id mauris pulvinar vehicula. Ut id dolor nec tortor tristique bibendum quis in sem. Nam convallis lorem vitae dolor vulputate sit amet tempus nisi blandit. Quisque non nunc justo, interdum dignissim mauris. Integer dui nulla, hendrerit id aliquam in, tristique vel nulla. In consequat nisl sit amet risus gravida imperdiet. Nunc pellentesque varius dolor, eu sollicitudin nisi bibendum sed. 
<br /><br />
Cras nec leo quis tortor congue porttitor a ut mi. Vestibulum tortor nisl, feugiat vitae venenatis ac, posuere ac sapien. Vestibulum at velit dui. Ut mollis, sapien blandit accumsan congue, mi metus egestas enim, in dictum ligula leo quis lorem. Integer nec quam purus. Proin non sem sed lacus consectetur elementum ac vel est. Integer tristique fermentum scelerisque. Fusce a eleifend augue. Proin vitae sem magna, non mollis felis. Etiam luctus ullamcorper libero non semper. Vestibulum vehicula, dolor et egestas tincidunt, lectus dui vestibulum neque, et viverra orci mauris sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus rhoncus viverra enim eu facilisis. 
<br /><br />
Suspendisse volutpat vestibulum ornare. Proin libero ipsum, condimentum vel pharetra vitae, lobortis in leo. Etiam eu nisi quis tellus sollicitudin molestie. Vivamus pretium sapien id libero egestas ac semper ligula semper. Nulla vehicula feugiat ligula ac dictum. Praesent quis libero a augue consectetur hendrerit. Nunc est sem, adipiscing ut hendrerit in, elementum ut nunc. Donec gravida gravida neque, sed pulvinar ipsum condimentum sed. Cras elementum, ante ac aliquam posuere, diam lectus pulvinar nibh, sit amet dapibus nibh quam a metus. Integer non porta lorem. Nam rutrum placerat magna et vestibulum. Morbi volutpat libero ut risus convallis interdum. Fusce lacus lacus, mattis sit amet molestie nec, bibendum id dolor. Vivamus tempor tristique turpis, in facilisis nisl scelerisque in. Proin laoreet velit congue mi sollicitudin facilisis. Etiam ipsum dolor, ornare ut pretium a, placerat eu risus
</div>
                </div>
                 
                 
                <!-- TAB 3 -->
                <div id="3" class="mybox" style="display:none;":>
                  <div>
                     Cras nec leo quis tortor congue porttitor a ut mi. Vestibulum tortor nisl, feugiat vitae venenatis ac, posuere ac sapien. Vestibulum at velit dui. Ut mollis, sapien blandit accumsan congue, mi metus egestas enim, in dictum ligula leo quis lorem. Integer nec quam purus. Proin non sem sed lacus consectetur elementum ac vel est. Integer tristique fermentum scelerisque. Fusce a eleifend augue. Proin vitae sem magna, non mollis felis. Etiam luctus ullamcorper libero non semper. Vestibulum vehicula, dolor et egestas tincidunt, lectus dui vestibulum neque, et viverra orci mauris sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus rhoncus viverra enim eu facilisis. 
<br /><br />
				 </div>
                </div>
                 
                </td>
                 
                
                </tr></table>
							
							
		</div>


</body>
</html>