CSS - Clueless. Ie6 Gaps In Images

@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-image: url(img/bk2.jpg);  
	background-repeat: repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.twoColFixLtHdr #container { 
	width: 820px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	min-width:inherit;
	max-widt:840;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header {
height:184px;
padding: 0; /* this padding matches the left alignment of the elements
in the divs that appear beneath it. If an image is used in the #header
instead of text, you may want to remove the padding. */
color: #000000;
background-color: #ffffff;
background-image: url(img/head.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
}

.twoColFixLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
	
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 0px 0px 0px;
}

.twoColFixLtHdr #sidebar12 {
float:none;
	 /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 0px 0px 20px;
}
.twoColFixLtHdr #mainContent { 
float:inherit;
	margin: 0 50px 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixLtHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#ed1b24; 
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

  <table width="150" class="tableborder" bgcolor="#FFFFFF" >
  <tr>
    <td width="148">
	</td>
  </tr>

******************* This is my problem ********************

  <tr bordercolor="#99CC99">
    <td valign="top" class="categoryborder"><center>
SEARCH
    </center></td>
  </tr>

*********************************************************
  <tr bordercolor="#99CC99">
    <td valign="top">      <table width="147" border=0 align="center">
        <TR>
          <Td width="146" align=center>
<FORM METHOD=GET ACTION="/isearch2/index.php/">
  <table border=0>

  <TR><td>
        <input maxLength="255" name=s size=10 value="">
      <input type=submit value="Go">
      <input type="hidden" name="action" value="search"> </td> </TR>
</TABLE>
</FORM>
 

          </Td>
        </TR>
    </TABLE></td>
  </tr><tr>
       <td valign="top" bordercolor="#006633" border="1" bgcolor="#FFFF99"><center>
         <span class="temp_body_bold">CLEANSING</SPAN>
    </center></td>
     </tr>
     <tr>
       <td valign="top"><div align="left">

       </div></td>
     </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">BUSINESS OPPORTUNITIES</SPAN> 
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
      <div align="left">

                  
        
    </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">	 <center>
      <span class="temp_body_bold">100% ESSENTIAL OILS</span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">      
</td>
  </tr>
  
     <tr>
       <td valign="top" bgcolor="#FFFF99"><center>
         <span class="temp_body_bold">FREE NEWSLETTER</SPAN>
       </center></td>
     </tr>
     <tr>
    <td valign="top"><center>
          <span class="temp_body_bold"><b>Health
          Tip & Weekly Specials</b></span>
        </center>
        <form name="" method="post" action="http://www.thefrugallife.com/12all/box.php">

        </form>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">WEIGHT LOSS </SPAN>
    </center></td><tr><td valign="top">
	  <div align="left">

      </div></td>
      </tr>
  
    <tr>
      <td valign="top" bgcolor="#FFFF99"><center>
        <span class="temp_body_bold">SPIRITUAL HEALTH</SPAN> 
      </center></td>
    </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF"><center>
        <div align="left">

          
        </div>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">FOR YOU </SPAN>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">

    </td>
  </tr> 
  <tr>
    <td valign="top" bgcolor="#FFFF99" ><center>
      <span class="temp_body_bold">PETS</span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF" ><center>
      <div align="left">
        
        
        </div>
    </center>      </td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">	 <center>
      <span class="temp_body_bold">VISIT OUR OTHER SITES </span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">      
      </td>
  </tr>
	
	
	
		
		
		
		<tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">SHOP</span>
    </center></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" align="center">
      <span class="temp_body_bold"><a href="http://www.theherbsplace.com/Online_Catalog_sp_59.html">Online
      Catalog</a></span>
     
  </td>
  </tr>
 </table>

.categoryborder {
position: relative;
left: 10px;
background-color:#FFFF99;
padding:0px;
font-family: "Arial";
	font-size: 11px;
	color: #000000;
	font-weight: bold;
}

.tableborder {
	border: 1px solid #006633;
	padding:0px;
}

 
#container
{
width:806px;
min-height:610px;
border-color: #666666;
border-style: solid;
border-width:3px;
z-index: 1;
margin: 0pt;
padding: 0pt;

}
#left
{
min-height:586px;
width:130px;
padding-right: 0pt;
margin-left: 0pt;
border:none;
float:left;
display: inline;
}
#menu
{
background-color: #eeeeee;
width:130px;
height:85px;
vertical-align: top;
display: none;
}
#logo
{
width:673px;
height:73px;
position: relative;
background-color:#ffffff;
display: block;
float:right;
}
#top_bar
{
width:673px;
height:50px;
background-color: #666666;
position:relative;
boder-width:0px;
display: inline;
float:right;
vertical-align: top;
}
#divider
{
width:673px;
height:24px;
background-image: url("images/divider.jpg");
background-repeat: repeat-x;
position: relative;
margin-left:-5px;
float:right;
}
#content
{
width:668px;
min-height:300px;
float:right;
}
#bot_bar
{
width:668px;
height:24px;
background-image: url("images/bbarbg.jpg");
float:right;
display: block;


}
#body_bg
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}

<body background="images/bg.jpg" bgcolor="#FFFFFF" style="background-repeat: repeat-x">
<div id="container">
	<div id="left">
		<img src="images/main_02.jpg" width="130" height="125" alt="">
		<div id="menu"><img src="images/main_09.jpg" width="130" height="20" alt="" vspace="0"><img src="images/main_10.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_12.jpg" width="130" height="23" alt=""vspace="0"><img src="images/main_13.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_14.jpg" width="130" height="20" alt=""vspace="0"></div>
	<img src="images/main_15.jpg" width="130" height="35" alt="" onclick="tongle()">
	</div>
	<div id="top_bar"></div>
	<div id="logo">
		<img src="images/main_06.jpg" width="668" height="73" alt="">
	</div>
	<div id="divider">
	</div>
	<div id="content">
	ds
	
							<p>ds</p>
							<p>s</p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
						</div>
	<div id="bot_bar">dasdsad</div>	
		</div>
	</body>

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

<div id='eventblurb'>
                             $Comment
                         </div>
                         <div id='eventdetails'>

                              <p class='countrylist'>
                                 Date: $Date<br>
                                 Time: $Time<br>
                                 Cost: $Cost<br>
                                 City: $City<br>
                                 Contact: <a href='mailto:$Email'>$Contact</a> - $Phone <br>
                                 Address: $Addr1 <br>
                                 Address: $Addr2 <br>
                                 Address: $Addr3 <br>
                                 Address: $Addr4 <br>
                                 Website: $Website <br>
                              </p>
                         </div>

#eventblurb {
    position:relative;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    height: 200px;
    width: 250px;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}
#eventdetails  {
    position:relative;
     top: -200px;
    left: 300px;
    width: 250px;


    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
@import "menu.css";

* {
  margin: 0;
  padding: 0;
}

body {
  margin:0;
  padding:0;
  text-align: center; /* IE5/Win fix */  
}

#wrapper {
  width:750px;
  height:100%;
  margin:0 auto 0 auto;
  border:1px solid green;
  text-align: left;
}

  #top {
   width:750px;
   height:60px;
   padding:5px 1px 0 3px;
  }

		#logohead {
		  width:370px;
		  height:60px;
		  position:absolute;
		  left:157px;
		  top:17px;
		  /*float:left;*/
		  background-image:url(../images/ricochetlogo.gif);
		  background-repeat:no-repeat;
		  background-position:bottom left;
		  z-index:5000;
		 }
		
		#toplinks {
		  height:60px;
		  width:365px;
		  margin-left:380px;
		  font-family:Verdana, Arial, Helvetica, sans-serif;
		  font-size:11px;
		  color:#666666;
		}
  
    #midbanner {
     width:auto;
     height:170px;
     border:1px solid red;
     position:relative;
    }
    
	#midblock {
	 width:auto;
     height:45px;
     position:relative;
	 background-color:#6292BB;
	 margin:1px 0 0 0;
	}
	
    #bottomcontent {
     width:auto;
     height:auto;
    /* border:1px solid #990; */
    }
	
		#leftnavbox {
		
		}
	
		#leftboxes {
		width:185px;
		height:auto;
		padding:5px 5px 0 5px;
		float:left;
		border:1px solid gray;
		}
		
			.leftbox, .leftboxBottom {
			height:80px;
			width:98%;
			border:1px solid #8D8D8D;
			background-image:url(../images/leftboxstrip.gif);
			background-repeat:no-repeat;
			background-position:top;
			color:#334C99;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:11px;
			font-weight:bold;
			padding-top:2px;
			}
			
			.leftbox{
			margin-bottom:10px;
			}
		
		#rightboxes {
		width:535px;
		padding:5px 0 0 0;
		margin-left:205px;
		border:1px solid pink;
		}
			.rightbox1, .rightbox2, .rightbox3 {
			height:176px;
			width:165px;
			border:1px solid blue;
			background-image:url(../images/teststip.gif);
			background-repeat:no-repeat;
			background-position:top;
			color:#ffffff;
			font-weight:bold;
			}
			
			.rightbox1 {
			float:left;
			}
			
			.rightbox2 {
			margin-left:183px;
			}
			
			.rightbox3 {
			float:right;
			}
		
		#bottombox {
			height:80px;
			width:535px;
			margin-top:10px;
			border:1px solid orange;
			}
		
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
  width:750.5px;
  wid\th:750px;
  }
/* end hide */

/* BEGIN MENU */
#nav,#nav li,#nav li ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
#nav {
  position: relative;
  width:750px;
  min-height: 3.1em;
  height:auto;
  margin:0;
  font-size: .8em;
  top: 0;
  }
  
#nav li {
  margin: 0 0 0 2px;
  padding: 0;
  width:100px;
  float:right;
  text-align:center;
  font-weight: bold;
  color:#444;
  }

#nav a {
  display:block;
  color:#999999;
  text-decoration:none;
  background: url(inactive.gif) no-repeat;
  background-image: url(inactive.gif);
  background-repeat: no-repeat;
  background-position: top left;
  margin:0;
  position: relative;
  font-weight: bold;
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size:13px;
  top: 0;
  line-height: 1.4em;
  }

#nav a:hover {
/*color:#334C99;*/
  color:#777777;
  }

ul#nav li a.here {
  background: url(active.gif) no-repeat;
  z-index: 310;
  position: relative;
  margin-bottom: -1px;
  color:#334C99;
  }
  
ul#nav li a.he hover {
  color:#334C99;
  }
  
ul#subnav {
  width:750px;
  min-height: 23px;
  height: 1.7em;
  background:url(subnav_background.gif) repeat-x;
  /*border-top:1px solid #efefef;*/
  border-top:1px solid #CECECE;
  text-align:right;
  padding:0 2px 0 0;
  clear:both;
  z-index:290;
  position:absolute;
  margin: 0;
  right: 0;
  top: 1.34em;
  }
/* hide from IE/Mac \*/
* html #nav {
  height: 3.1em;
  wid\th:752px;
  lef\t: 1px;
  }

* html #nav a {
  height: 1%;
  }

* html ul#subnav {
  wid\th:753px;
  }
/* end hide */

#subnav li {
  position:relative;
  z-index:102;
  display: block;
  margin: 0 /*3px 0 1px*/;
  padding: 0;
  float:left;
  line-height: 1.4em;
  /*width:auto;*/
  width:50px;
  }

ul#subnav li a {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  /*font-weight:600;*/
  font-size:9px;
  margin-top:3px;
  color:#666666;
  background-image:url();
  border-left:1px solid #cccccc;
  }
</style>
</head>
<body>
<div id="wrapper">
  <div id="top">
		<div id="logohead">&nbsp;</div>
		<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
  </div>
  <ul id="nav">
		<li><a class="a3" href="#">About</a></li>
		<li><a class="a2" href="#">Tools</a></li>
		<li><a class="a1" href="#">Text</a></li>
		<li><a class="a0 here" href="#">Home</a>
		<ul id="subnav"><li>&nbsp;</li></ul>
		</li>
  </ul>
  <div id="midbanner">Flash Banner Here</div>
  <div id="bottomcontent">
		<div id="leftboxes">
			<div class="leftbox"><img src="images/bluearrows2.gif">&nbsp;</div>
			<div class="leftbox"><img src="images/bluearrows2.gif">&nbsp;</div>
			<div class="leftboxBottom"><img src="images/bluearrows2.gif">&nbsp;</div>
		</div>
		<div id="rightboxes">
			<div class="rightbox1">1</div>
			<div class="rightbox3">3</div>
			<div class="rightbox2">2</div>
			<div id="bottombox">4</div>
		</div>
  </div>
</div><!--end Wrapper-->
</body>
</html>

<div>
<div style="width:88px; float:left" >
<a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37"
target="_blank">
<img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> 
<span  class="a"  style='line-height: .5;'>FREE Town Guide</span></a> 
</div> 
<div style="float: left; width:50px;">
<a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> 
<span   style='line-height: .5;'>CIBA Member</span></a> 
</div>