Small HTML Problem

Associate
Joined
3 Aug 2006
Posts
610
Location
London, UK
Having a small problem with a website I am making for someone. Everything is working fine in Firefox but in Internet Explorer there is a small gap between the logo and the navigation bar.
I am using IE7 btw

website.jpg


HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<title>Kingston Roofing | Home</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<center>

	<div class="logohead">
		<img alt="Kingston Roofing" src="images/logo.jpg"
	</div>
	
	<div class="navigation">
		<img alt="Home |" src="images/btnhome.jpg">
	</div>
	
	<div class="maintext">
	<h1>Title</h1>
	<p>lol</p>
	<br>
	</div>
	
	<div class="copyright">
	</div>

</center>
</body>

</html>

CSS
Code:
html {
	font-family:Arial
}

body {
	margin-top:0px;
	background:#000000;
}

h1 {
	margin-top:0;
	margin-left:10px;
	font-size:18pt;
	text-decoration:underline;
}

p {
	margin-left:10px;
}

img {
	margin-top:0;
}

div.logohead {
 	background:#ffffff;
	width:800px;
	height:150px;
}

div.navigation {
	background:#ffffff;
	width:800px;
	height:30px;
	text-align:left;
}

div.maintext {
 	background-color:#ffffff;
	width:800px;
	text-align:left;
}

div.copyright {
	height:50px;
	width:800px;
	text-align:center;
	color:#ffffff;
	background-image:url('images/footer.jpg');
	margin-top:0px;
}

Please ignore the centering on the navigation bar...I forgot to refresh the page before takign the screenshot :p
 
if IE7 added a margin to the divs then it would have shown up on all of them I would have thought. The div.logohead is flush with the top of the page as well so i dont think it's that.
I suppose I could simply wrap the whole thing in a white div

EDIT:
Wrapping it in a div didn't work
 
Last edited:
Back
Top Bottom