Maybe this has been discussed here before, but I was unable to find a related post. So here is my problem:
I have a html site with a banner and a content area. The banner area has a border at the bottom:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
#banner, #content {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#content {
background-color: green;
}
#banner {
background-color: red;
border-bottom: 1px solid rgb(200, 200, 200);
height: 70px;
}
</style>
</head>
<body>
<div id="banner">
<h3>Banner</h3>
</div>
<div id="content">
<h3>Content</h3>
</div>
</body>
</html>
The problem is the horizontal whitespace between the banner and the content div (which I don’t want).
However, if I move the border-bottom from the banner div to a border-top of the content div the whitespace dissapears and everything is rendered as I would have expected it. This seems strange to me, but is at least consistent between chrome and ie9 (haven’t tested other browsers yet). What is the reason for this behaviour? It seems that is caused by the h3 tag. Note also, that the page height varies depending on the positon of the border.
It will be the margin of the h elements. Do
h3{margin:0px;}That should sort the gap 🙂EDIT :
If the gap persists try padding on the h elements too.
Or the error could be with the margin between the banner and content.