Hi, I am having a few issues with a site in that it works fine in Firefox, Opera and IE7 but kinda dies in IE6
I am usually pretty good with browser compatibility but for some reason cannot get my head around it today.
The problem being the sidebar links, in IE6 they are too far apart and when hovered over, they then close up, try it and see what i mean
http://www.simonvincent.co.uk
The HTML is this;
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>
<title>Untitled Document</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="assets/styles-1.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="assets/date.js"></script>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="content">
<div id="content-sidebar">
<div id="date"><script type="text/javascript">printDate()</script></div>
<div class="section-header"><a href="#">LATEST NEWS »</a></div>
<br />
<div class="section-header">FORMULAS</div>
<ul>
<li><a href="#">Rookie Bangers</a></li>
<li><a href="#">National Bangers</a></li>
</ul>
<div class="section-header">FIXTURES</div>
<ul>
<li><a href="#">Arlington Raceway</a></li>
<li><a href="#">Bovingdon Raceway</a></li>
<li><a href="#">Wimbledon Stadium</a></li>
</ul>
<div class="section-header">PHOTOS</div>
<ul>
<li><a href="#">Rent A Rookie</a></li>
<li><a href="#">Fans & Supporters</a></li>
<li><a href="#">TV/Promotional Work</a></li>
<li><a href="#">Cecils Racing Galleries</a></li>
</ul>
<div class="section-header">TV & PRESS</div>
<ul>
<li><a href="#">Television Work</a></li>
<li><a href="#">Promotional Work</a></li>
<li><a href="#">Press Cuttings</a></li>
</ul>
<div class="section-header">COMPANY INFO</div>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">Sponsorship Deals</a></li>
<li><a href="#">Price List</a></li>
<li><a href="#">Gift Vouchers</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="section-header">FUN & GAMES</div>
<ul>
<li><a href="#">Online Banger Racing</a></li>
<li><a href="#">rFactor</a></li>
<li><a href="#">Batracer</a></li>
</ul>
<div class="section-header"><a href="/">RENT A ROOKIE HOME »</a></div>
</div>
<div id="content-main">main</div>
</div>
<div id="footer">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">Contact Us</a> |</li>
<li><a href="#">Help/FAQ</a> |</li>
<li><a href="#">Advertising/Sponsorship</a></li>
</ul>
<p>© copyright 2004 - 2007. Cecils Rent A Rookie Ltd. All rights reserved.</p>
</div>
</div>
</body>
</html>
CSS is;
Code:
body {
font-size: 100%;
font-family: Tahoma, Verdana, Arial;
text-align: center;
background-color: #333333;
}
/************* #container styles **************/
#container {
text-align: left;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/************* #header styles **************/
#header {
width: 750px;
background-color: #000000;
height: 100px;
margin: 0px;
padding: 0px;
}
/************* #content styles **************/
#content {
background-image: url(images/backgrounds/sidebar-1.jpg);
background-repeat: repeat-y;
background-position: left top;
width: 750px;
min-height: 550px;
}
/************* #content-sidebar styles **************/
#content-sidebar {
width: 140px;
float: left;
color: #000000;
padding-bottom: 5px;
}
#content-sidebar #date {
width: 135px;
color: #666666;
margin-left: 5px;
font-size: 0.7em;
font-weight: bold;
margin-bottom: 10px;
}
#content-sidebar ul {
list-style-type: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#content-sidebar li {
font-size: 0.75em;
color: #868686;
margin: 0px;
padding: 0px;
}
#content-sidebar li a {
color: #868686;
text-decoration: none;
display: block;
padding-left: 5px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#content-sidebar li a:hover {
color: #868686;
display: block;
width: 135px;
background-color: #ECECEC;
}
/************* .section-header styles **************/
.section-header {
font-weight: bold;
color: #000000;
font-size: 0.7em;
margin-left: 5px;
padding: 0px;
}
.section-header a {
color: #000000;
text-decoration: none;
}
.section-header a:hover {
color: #000000;
text-decoration: none;
}
/************* #content-main styles **************/
#content-main {
width: 605px;
background-color: #FFFFFF;
margin-left: 145px;
}
/************* #footer styles **************/
#footer {
text-align: center;
width: 750px;
color: #FFFFFF;
background-color: #000000;
margin-top: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
#footer ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footer li {
display: inline;
padding: 0px;
font-size: 0.75em;
}
#footer li a {
text-decoration: none;
color: #FFFFFF;
margin-left: 9px;
margin-right: 5px;
}
#footer li a:hover {
text-decoration: underline;
}
#footer p {
font-size: 0.75em;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin: 0px;
}
#footer a {
color: #FFFFFF;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
Before you post, read our: 
