<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>david j. cubberly</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="img/style.css" type="text/css">
<style>
body, html {padding:0; margin:0; border:0; /* prevents IE from doing stupid things. MUST KEEP. */}
body {background-color: #000;}
#wrapper {width:888px; margin:15px auto; /* wraps everythng in container, and centers the page */}
p {font-family: arial, helvetica, sans-serif;
font-size: 9pt;
color: #fff;
text-align: left;}
h2 {font-family: arial, helvetica, sans-serif;
font-size: 16pt;
color: #ff0;
text-align: left;}
a:link {text-decoration: underline;
color: #fff;}
a:visited {text-decoration: underline; color: #fff;}
a:hover {text-decoration: none; color: #ff0;}
a:active {text-decoration: none;color: #ff0;}
a:visited:hover {text-decoration: none; color: #ff0;}
#container {width: 880px; height: 500px; position: relative;
border:0;
margin:0;
padding:0;}
#logo {background: #000;
width: 881px;
height: 60px;}
#nav {background: #000;
width: 879px;
height: 15px;
margin:10px auto 0 auto; /* 10px top, zero-pixels bottom, centered*/ }
#nav img {border:1px solid white;}
#box {background: #000;
width: 879px;
height: 499px;
border: 1px solid #fff;
margin-top:0;}
#bottom {background: #000;
width: 879px;
height: 75px;
font-family: arial, helvetica, sans-serif;
font-size: 8pt;
color: #fff;
text-align: left;}
#text {background: #000;
margin: 10px 0px 0px 65px;
width: 769px;
height: auto;
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
color: #fff;
text-align: left;}
#indextext {background-image: none;
margin: 35px 0 0 85px;
width: 769px;
height: auto;
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
color: #fff;
text-align: left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href="http://www.davidjcubberly.com/" target="_top"><img src="http://www.davidjcubberly.com/img/logo.jpg" alt="davidjcubberly.com" border="0"></a>
</div>
<div id="nav">
<a href="rockphotos.html" onmouseover="image1.src='img/rockphotos-on.gif';" onmouseout="image1.src='img/rockphotos.gif';"><img name="image1" src="img/rockphotos.gif" border="0" alt="rock photos"></a><a href="portfolio.html" onmouseover="image2.src='img/portfolio-on.gif';" onmouseout="image2.src='img/portfolio.gif';"><img name="image2" src="img/portfolio.gif" border="0" alt="portfolio"></a><a href="lomo.html" onmouseover="image7.src='img/lomo-on.gif';" onmouseout="image7.src='img/lomo.gif';"><img name="image7" src="img/lomo.gif" border="0" alt="lomo"></a><a href="music.html" onmouseover="image3.src='img/music-on.gif';" onmouseout="image3.src='img/music.gif';"><img name="image3" src="img/music.gif" border="0" alt="music"></a><a href="press.html" onmouseover="image8.src='img/press-on.gif';" onmouseout="image8.src='img/press.gif';"><img name="image8" src="img/press.gif" border="0" alt="press"></a><a href="links.html" onmouseover="image5.src='img/links-on.gif';" onmouseout="image5.src='img/links.gif';"><img name="image5" src="img/links.gif" border="0" alt="links"></a><a href="archive.html" onmouseover="image4.src='img/archive-on.gif';" onmouseout="image4.src='img/archive.gif';"><img name="image4" src="img/archive.gif" border="0" alt="archive"></a><a href="contact.html" onmouseover="image6.src='img/contact-on.gif';" onmouseout="image6.src='img/contact.gif';"><img name="image6" src="img/contact.gif" border="0" alt="contact"></a>
</div>
<div id="box">
<iframe src="http://www.davidjcubberly.com/index1.html" name="frame" width="879" height="499" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
</div>
<div id="bottom">
© 2006 david j. cubberly
</div>
</div> <!-- end WRAPPER div -->
</body>
</html>
I put your STYLEs into the HTML so I could work with it offline. Made some changes. Found at least one error, -the letter "oh" where you wanted the number "zero". :D
Put a 'wrapper' around the page, slightly bigger than your work, and 'centered' that with margin(s) "auto", instead of using the deprected <center>~</center> tags (or at least, "<center>~</center>" has fallen out of favor...)
Without 'absolute paths' to your images, the navigation images in the div "nav" aren't showing, just the "alt text", so I can't be sure if this is going to work, but it is very nearly the same result in IE as it is in Fx now. That is what you wanted.
I see about 1-px gap beneith the navigation links and the content box, but the same in IE & Fx. Possibly, when images populate this, that might be gone. I had to put a 1-px white border around these, to see them against the black background (THAT might be the '1-pixel gap' that I now see in both IE and Fx...)
Would need absolute paths to images working for me to fully see what I'm doing...
Not sure if you needed those <div id="clear"></div>s, so I removed them. They didn't seem to be adding anything substanative to the presentation. If they are meant to 'clear' something, I didn't see it. :confused:
-Joel