Positioning and Random Space

programming web dev
1

Can someone suggest a solution for these two problems: (this only applies to IE)

  1. there is a space between the left navigation and the header
  2. the horizontal navigation positions oddly in IE, goes up in to the header

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to ThisOldFlag.com! | Your #1 Source For American Flags And Hardware!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cw3/Assets/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/media/css/main.css" />

</head>
<body>
<div id="allcontent">
<div id="header_image" align="center">
<img src="images/header.jpg" alt="Welcome to ThisOldFlag.com" />
</div>
<!--
<div id="search">
<cfmodule id="CW3Search" template="cw3/CWTags/CWTagSearch.cfm" searchtype = "Form" keywords = "No" category = "Yes" secondary = "Yes">
</div>
-->
<div id="header_navigation">
<ul>
<li><a href="http://thisoldflag.com/index.html">Home</a>&nbsp;</li>
<li><img src="images/white_dot.png" /></li>
<li>&nbsp;<a href="http://thisoldflag.com/index.html">About Us</a>&nbsp;</li>
<li><img src="images/white_dot.png" /></li>
<li>&nbsp;<a href="http://thisoldflag.com/index.html">Flag Etiquette</a>&nbsp;</li>
<li><img src="images/white_dot.png" /></li>
<li>&nbsp;<a href="http://thisoldflag.com/index.html">Shop</a>&nbsp;</li>
<li><img src="images/white_dot.png" /></li>
<li>&nbsp;<a href="http://thisoldflag.com/index.html">Policies</a>&nbsp;</li>
<li><img src="images/white_dot.png" /></li>
<li>&nbsp;<a href="http://thisoldflag.com/index.html">Contact Us</a></li>
</ul>
</div><!--end header navigation-->

<div id="nav_list">
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Homes</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Business/School</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Desk & Table</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags Hand-Held</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Indoor & Sets</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Marine</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Flags for Motorcycles</a><br>
<img src="images/star.jpg" /><a href="http://thisoldflag.com/index.html">Hardware & Poles</a><br>
</div><!--end left_pane"-->

<div id="promotion_1">
</div><!--end promotion_1-->
</div><!--end allcontent-->
</body>
</html>

The CSS is as follows:


#allcontent {
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	width: 800px;
}

/*Keeps the links from displaying a square border around images*/
img {
	border: none;
}

#header_navigation {
	margin-top: -43px;
	margin-left: 170px;
	position: absolute;
}

#header_navigation li {
	font-size: 18px;
	font-family: Times, serif;
	color: #FFF;
	list-style-type: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}

#header_navigation a:link {
	text-decoration: none;
	color: white;
}

#header_navigation a:hover {
	text-decoration: underline;
	color: #D3D3D3;
}

#header_navigation a:visited {
	text-decoration: none;
	color: white;
}

/*-----*/
#nav_list {		
	text-decoration: none;
	width: 220px;
	padding: 0px;
	margin-top: 0px;
	border: 1px solid gray;
	font-family: Times, serif;
	font-size: 13pt;
}

#nav_list a:link {
	color: #000033;
	text-decoration: none;
}

#nav_list a:hover {
	color: #330000;
	text-decoration: underline;
}

#nav_list a:visited {
	color: #000033;
	text-decoration: none;
}
/*-----*/