I am having problems positioning a set of text links onto a div I have set up. They are in the right position automatically in IE7 but they show too far down in FF2. I can force them up using a "margin-top" command but then they show to far up in IE. Could someone have a look at my code for me, thanks.
body {background-color:#666666;}#container {margin-top:50px;width:770px;margin-left: auto;margin-right: auto;}#content {background-color:#e1e1e1;width:765px;border-width:2px;border-style:solid;border-color:#000000;}#base {margin-top:130px;float:none;height:20px;border:2px solid black;border-left:0px;border-right:0px;background-color:#444444}#topleft {float:left;width:130px;height:130px;border-right:2px solid black;background-color:#444444;}#image {float:right;width:633px;overflow:hidden;}a.nav:link, a.nav:visited, a.nav:active {color:#CCCCCC;float:left;padding-left:10px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:15px;text-decoration:none;width:55px;font-weight:500;}a.nav:hover {color:#444444;background:#CCCCCC;float:left;padding-left:10px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:15px;text-decoration:none;width:55px;height:20px;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Andy</title><link rel="stylesheet" type="text/css" href="site.css" /></head><body><div id="container"> <div id="content" > <div id="topleft" > </div> <div id="image" ><img src="images/website/index.php" alt="image" longdesc="main image" /></div> <div id="base" > <p><a href="/index.html" class="nav">Home</a> <a href="/index.html" class="nav">Photos</a> <a href="/index.html" class="nav">Jokes</a> <a href="/index.html" class="nav">House</a></p> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div></div></body></html>
http://www.games-system.co.uk/images/other...tion%20prob.jpg