HTML - Problem With Css Style Sheet And Index.htm

<!--Start How To Menu-->
<div id="howto" style="top: 3em; right: 0em;">
  <img alt="" src="imagesindex/down-triangle.gif" style="float:right; margin-top:0.3em; margin-left: 0px; margin-right: 1em;" height="10"/>
  How to...<br /> <hr width="80%" style="text-align: left;" />
<!-- Start How To drop-down menu -->
  <a href="membership/index_new.htm">become a member</a>
   ...
  <a href="contact_new.htm">contact a <abbr title="Western Development Museum">WDM</abbr></a>
  <!-- End About drop-down menu -->
</div> <!--End How To Menu-->

body{
background-image:url('imagesindex/background_attempt_fade.jpg');background-position:left;background-repeat:repeat;
  font-family: Arial, Helvetica, sans-serif;
}

/* START topper */
#topper{
	height:4.5em;
	width:50em;
   margin: 20px auto 0 auto;
   position:relative;
   z-index:100;
}

#topper a.contact{
	position:absolute;
        ...
	display:block; 
	z-index:100;
}


/* START howto Menu */
#howto{
	width:15em;
	background-color:#FFF;
	padding-left:2%;
	float:right;
	border:thin gray groove;
	position:absolute; 
	line-height:1.4em; 
	height:1.4em; 
	overflow:hidden;
	z-index:100; 
}


#howto:hover {
	height:auto; 
	cursor:pointer;
}

#howto a {
	display:block; 
	width:100%; 
	line-height:1.4em; 
	color:#000; 
	text-decoration:none;
}

#howto a:visited {
	display:block; 
	width:100%; 
	line-height:1.4em; 
	color:#000; 
	text-decoration:none;
}

#howto a:hover {
	color:#000;
	background:#ddd;
}
/* END howto Menu */
/* END topper */

#wrapper{
   width: 50em;
   background-color:white;
   margin: 5px auto 0 auto;
   border-color:#98B539;
   border-style:ridge;
   border-width:thin;
   z-index:0;
   } 

/* Make branding a positioned element, but don't move it */
#branding{
  position:relative;
  border-bottom:thin #98B539 solid; 
  z-index:0;
}