Yep, understand that. I do remember something about default margin and padding setting differences between IE and the rest of the world; just can't remember what.
And sorry for not listing the code. The CSS is as follows:
<code>
/* Basic Definitions */
body
{
font-size: 71%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
color: #ff9;
background-color: #666;
}
a, a:visited
{
text-decoration: none;
color: #fff;
}
a:hover
{
text-decoration: underline;
color: #ff6;
}
.fleft
{float: left}
.fright
{float: right}
/* End of Basic Definitions */
/* Div ID Definitions */
#page
{
width: 990px;
height: 540px;
margin-top: 0.5em;
margin: 0 auto;
border: 1px #333 solid;
background-color: #0255bd;
}
#header
{
width: 990px;
height: 50px;
z-index: 1;
}
#navbar
{
height: 25px;
width: 990px;
text-align: center;
}
#sidebar
{
position: absolute;
height: 440px;
width: 190px;
margin-left: 7px;
z-index: 0;
}
#content
{
width: 790px;
height: 440px;
}
#MainFrame
{
width: 790px;
height: 440px;
background-color: #0255bd;
overflow: auto;
}
#foot
{
position: absolute;
width: 990px;
height: 245px;
margin-top: 209px;
z-index: 2;
}
/* End of Div ID Definitions */
/* Horizontal Navigation Definitions */
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
font-size: 80%;
}
#navlist a
{color: #fff}
#navlist a:hover
{color: #ff6}
/* End of Horizontal Navigation Definitions */
/* Vertical Navigation Definitions */
#sidebar ul
{
padding: 0;
margin: 0;
}
#navlistv li
{
padding: 0;
list-style-type: none;
padding-bottom: 8px;
font-size: 80%;
}
#navlistv a
{color: #fff}
#navlistv a:hover
{color: #ff6}
/* End of Vertical Navigation Definitions */
</code>
I will play with the margins and paddings but if you spot it, fantastic!
Page code is:
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Site</title>
<meta name="keywords" content="">
<link href="gnstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="header">
<img src="images/welcome.png" alt="Welcome">
</div> <div id="navbar">
<ul id="navlist">
<li><a href="main.html" target="pages">HOME</a></li>
<li><a href="music.html" target="pages">Music</a></li>
<li><a href="climbing.html" target="pages">Climbing</a></li>
<li><a href="running.html" target="pages">Running</a></li>
<li><a href="travel.html" target="pages">Travel</a></li>
<li><a href="designs.html" target="pages">Website Designs</a></li>
<li><a href="fav.html" target="pages">Favourites</a></li>
<li><a href="aboutme.html" target="pages">About Me</a></li>
<li><a href="links.html" target="pages">Links and Things</a></li> </ul>
</div> <div id="sidebar" class="fleft">
<ul id="navlistv">
<li><a href="main.html" target="pages">HOME</a></li>
<li><a href="music.html" target="pages">Music</a></li>
<li><a href="climbing.html" target="pages">Climbing</a></li>
<li><a href="running.html" target="pages">Running</a></li>
<li><a href="travel.html" target="pages">Travel</a></li>
<li><a href="designs.html" target="pages">Website Designs</a></li>
<li><a href="fav.html" target="pages">Favourites</a></li>
<li><a href="aboutme.html" target="pages">About Me</a></li>
<li><a href="links.html" target="pages">Links and Things</a></li> </ul>
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>
<script type="text/javascript">
var so = new SWFObject("player.swf", "mymovie", "190", "90", "7", "#0055bd");
so.write("flashPlayer");
</script>
</div>
<div id="content" class="fright">
<iframe id="MainFrame" name="pages" frameborder="0" src="main.html"></iframe>
</div>
<div id="foot">
<img src="images/foot.gif" alt="Climbing Wall">
</div>
</div>
</body>
</html>
</code>
.