PDA

View Full Version : White gap appears above footer.


Corrosive
08-25-2008, 04:03 PM
Hi all

Just can't figure this out. Have a look at the screenshots below...

http://browsershots.org/http://steelpress.net/projects/tmu/index.htm

There is a white gap between the main body and the footer in CSS compliant browsers, but none in 'good old IE7' :wink: . Here is the HTML...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Terry Manning Upholstery - Commercial - Domestic - Marine - Automotive - Devon and Cornwall</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #101E40;
}
a:visited {
color: #101E40;
}
a:hover {
color: #5B1C2B;
}
a:active {
color: #5B1C2B;
}
body {
background-image: url(images/Page_bg_image.jpg);
}
</style>
<link href="css_files/main_layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner_one"></div>
<div id="navbar_one">
<ul id="nav">
<li><a href="box_test.htm">Home</a></li>
<li><a href="#">Online Enquiry</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="main_wrapper">
<div id="left_column">
<div id="Products_box" class="box_header">
<h1>Portfolio Galleries (click to view)</h1>
</div>
<div id="products_menu" class="box_body">
<ul id="products_nav">
<li><a href="#"><img src="images/marine_link_img.jpg" alt="link to marine gallery" width="85" height="93" ></a></li>
<li><a href="#"><img src="images/marine_link_img.jpg" alt="link to marine gallery" width="85" height="93" ></a></li>
<li><a href="#"><img src="images/marine_link_img.jpg" alt="link to marine gallery" width="85" height="93" ></a></li>
</ul>
</div>
<div id="news_box" class="box_header">
<h1>About Us</h1>
</div>
<div id="news_text" class="box_body">
<h2>Sed lacus. Donec lectus.</h2>
<p>Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
</div>
</div>
<div id="right_column">
<div id="brands_box" class="box_header">
<h1>Testimonials</h1>
</div>
<div id="brands_images" class="box_body">
<h2>This is what our customers have said about us:</h2>
<h3>'Brilliant'</h3>
<h3>'Fantastic'</h3>
<h3>'You can't do better than Terry Manning Upholstery'</h3>
</div>
</div>
</div>
<div id="footer">Terry Manning Upholstery<br> 36 Summerlands Close, Brixham, Devon, TQ5 0EA<br>
Website Design by <a href="http://www.steelpress.net">Steel Press</a> 2008</div>
</div>
</body>
</html>



And here is the CSS...

h1 {
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-size: 12px;
font-weight: bold;
color: #101E40;
font-style: italic;
}
h3 {
font-size: 10px;
font-weight: bold;
color: #101E40;
}
p {
font-size: 10px;
font-weight: normal;
color: #101E40;
}
ul {margin: 0;
}
img {
border: 0;
}
.box_header {
background-color: #101E40;
margin: 10px 10px 0px;
padding-top: 2px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 3px;
}
.box_body {
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
margin-right: 10px;
margin-left: 10px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
}
#wrapper {
margin-right: auto;
margin-left: auto;
position: relative;
height: auto;
width: 800px;
background-attachment: scroll;
background-image: url(../images/wrapper_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #F6F4DF;
}
#banner_one {
position: relative;
height: 150px;
width: 100%;
}
#navbar_one {
position: relative;
height: 110px;
width: 25%;
left: 75%;
}
#nav li {
display:block;
margin:0;
zoom: 1;
font-size: 12px;
font-weight: bold;
color: #000000;
line-height: 25px;
list-style-type: circle;
text-align: left;
list-style-position: outside;
}
#left_column {
position: relative;
height: 550px;
width: 560px;
float: left;
}
#right_column {
position: relative;
height: 550px;
width: 240px;
float: left;
}
#footer {
position: relative;
height: 44px;
width: 780px;
clear: both;
background-color: #F6F4DF;
font-size: 10px;
color: #101E40;
font-weight: bold;
text-align: left;
background-attachment: scroll;
background-image: url(../images/credit_cards.gif);
background-repeat: no-repeat;
background-position: right;
padding-right: 10px;
padding-left: 10px;
}
#main_wrapper {
position: relative;
height: 500px;
width: 100%;
background-color: #F6F4DF;
}
#Products_box {
height: 20px;
width: 520px;
position: relative;
}
#products_menu {
height: auto;
width: 518px;
position: relative;
}
#products_nav li {
display:inline;
margin:0;
padding:0.5em;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
border-right: 1px dashed #101E40;
}
#news_box {
height: 20px;
width: 520px;
position: relative;
}
#news_text {
height: auto;
width: 518px;
position: relative;
}
#brands_box {
height: 20px;
width: 204px;
position: relative;
}
#brands_images {
height: auto;
width: 202px;
position: relative;
}

Any ideas anyone? Thanks, as ever, for any help provided :)

domedia
08-25-2008, 04:25 PM
Your left and right column is set to 550px tall. Their wrapper is set to 500px tall.
The discrepancy is what is creating the 50px white area.

The easy fix would be to just remove all the height properties. You rarely need it for main layout boxes like these.

Corrosive
08-25-2008, 04:50 PM
Your left and right column is set to 550px tall. Their wrapper is set to 500px tall.
The discrepancy is what is creating the 50px white area.

The easy fix would be to just remove all the height properties. You rarely need it for main layout boxes like these.

Thanks Domedia

OK, I have taken out all height properties. I want a bit of breathing space between the main column and the footer. Would the best way to do it be putting a bottom marging on the 'about us' box ('news' in the CSS but I'll change that :wink: )? I take it this would force the left column down a bit further without me setting the height for the column?

domedia
08-25-2008, 05:13 PM
Put a top margin on the footer. That way the layout is not depending on wether the right or left column is the longest one.

Corrosive
08-26-2008, 10:25 AM
Put a top margin on the footer. That way the layout is not depending on wether the right or left column is the longest one.

That's worked nicely. Thanks again Domedia.