Small HTML Problem

EirePlane

EirePlane

EirePlane

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
 
Not entirely sure about this, but im pretty sure IE7 adds a margin by default with div's.
In other words add:
margin:0;
to div.logohead & div.navigation
I think that will solve your problem.
 
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:
stick
* {
margin:0;
padding:0;
}

at the top of your css file just to make sure thats not a problem
 
The first thing you need to do is sort out your HTML so that it validates with the W3C Validator. I've removed all the errors you'd made with your HTML 4.01 Strict doctype, including closing unclosed elements and removing depreciated ones. Go to W3Schools to see the HTML 4.01 Reference for the use of elements and attributes.

HTML:
Code: 
<!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">
<meta name="description" content="NLN Home">
<meta name="author" content="Matthew Hargraves">
<title>Kingston Roofing | Home</title>
</head>
<body>

	<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>


</body>
</html>
As you can see, I've removed the <center> element because it is depreciated in HTML 4.01. To centre your layout make the changes in yellow to your...

HTML:
Code: 
[b][color=Yellow]<div id="container">[/color][/b]
	<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>
[b][color=Yellow]</div>[/color][/b]
And then use the following...

CSS:
Code: 
*, html, body{margin: 0; padding: 0;}

body{
	margin: 0 auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif; 
	background-color: #000000;
	}

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

p{
	margin-left:10px;
	}

img{
	margin-top:0;
	}

#container{
	margin: 0 auto;
	width: 800px;
	}

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

div.navigation{
	background-color: #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;
	}
Hopefully that will set you off in the right direction. :)
 
You must log in or register to reply here.
Back
Top Bottom