Extra Whitespace in IE7 Footer

Telemicus posted this at 14:19 — 21st December 2008.

He has: 33 posts

Joined: Dec 2004

Hi,

I am working on a new site layout design at the moment and have come

across a problem in IE7. The design looks OK in firefox as shown here:

http://i466.photobucket.com/albums/rr29/garnettj/firefoxtest.jpg

but in IE7 I get some extra white space at the around the border of my

footer as shown here:

http://i466.photobucket.com/albums/rr29/garnettj/ie7test.jpg

My CSS looks like this:

body {
	background: #EFEFDF;
	background-color: #EFEFDF;
	padding: 0;
	margin: 10px auto;
	text-align: center; /*** Used for older browser support ***/
}



/*** Main Container - This is used to contain the entire site ***/

#container {
	background:#EFEFDF;
	color:#303030;
	margin: 0 auto;
	padding:0;
	text-align:left;
	width:1000px;
	background-color: #EFEFDF;
}

#headercontainer {
	background:#FFFFFF;
	background-color:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
}

#header {
	background: #FFFFFF url(../images/lightbluestripe.png) repeat;
	height: 100px;
}

#navbar {
	background:url(../images/navbarblack.png) repeat-x;
	padding: 10px;
	color:#FFFFFF;
	max-height: 40px;
	font:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	
}

#content {
	margin-top: 10px;
}

#contentleft {
	float:left;
	width:800px;
	background:#FFFFFF;
	background-color:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
}

#contentright {
	float: right;
	margin-left: 10px;
	width: 175px;
	background:#FFFFFF;
	background-color:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
}

#clearme {
	clear:both;
}

#footercontainer {
	height:auto;
	margin-top: 10px;
	background:#FFFFFF;
	background-color:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
	clear:both;
}

#footer {
	background: #313131 url(../images/footer1.gif) repeat;
	height: 100px;
	color:#FFFFFF;
}

and the body of the html document looks like this:

<body>
<div id="container">
<div id="headercontainer">
	<div id="header"><img src="images/logo.png" /></div>
	<div id="navbar">Home | Articles | Content | Videos | Sitemap | 

Contact</div>
</div>

<div id="content">
	<div id="contentleft">
	<p>Some Text Goes Here</p>
	</div>

	<div id="contentright">
	<p>Menu might go here</p>
	</div>
</div>

<div id="clearme"></div>

<div id="footercontainer">
	<div id="footer">Designed by Me</div>
</div>

</div>
</body>

Any ideas what I need to do to correct the situation properly?
Also, I'm hoping to force the footer below the content area - am I doing this correctly with the clearing div?

Thanks in advance

Dog Training Videos | PS Vita Game Downloads | Hunting Tips | Skeet Shooting

decibel.places posted this at 19:40 — 21st December 2008.

He has: 1,494 posts

Joined: Jun 2008

Hi Telemicus,

I don't have time today to play around with your code, but have you tried various settings for the padding and borders?

Once you find styles that work, you may need a stylesheet for IE only

greg posted this at 23:19 — 21st December 2008.

He has: 1,581 posts

Joined: Nov 2005

A link to the website makes it much easier when debugging. I know not always possible - password protected in dev stages etc, but it is MUCH easier with access to the site.

I'll try to have a look at the code you provided though and see if something is obvious, but post a link in the meantime if you can

I presume by extra white space in the footer you mean the few pixels at the top (only) of the bottom dark box?
As I noticed also that there is a lot more spacing around the main text ("some text goes here") in Firefox

Some notes
This <div id="container">
is CLOSED (</div>)
AFTER these are opened and closed
<div id="footercontainer"><div id="footer">

HAVE you tried
In this div ID CSS - #footercontainer
Removing this - margin-top: 10px;
?
Or changing this
height:auto;

decibel.places posted this at 17:11 — 23rd December 2008.

He has: 1,494 posts

Joined: Jun 2008

greg wrote:

A link to the website makes it much easier when debugging. I know not always possible - password protected in dev stages etc

When I want to display an image on a post here I

1. attach the image - you may get an error mesage, ignore it (Jeeves?)
2. use the attached URL as the source of an image in the post if the image is small enough to fit in the post container

sometimes, I think when you attach more than one image, you need to submit the post then re-edit it to see the attached file urls (Jeeves?)

that way you can either refer to the attached link if the image is large, or if it fits in the forum container you can display it in the post.

Example:

Telemicus posted this at 17:49 — 22nd December 2008.

He has: 33 posts

Joined: Dec 2004

Hi Guys,

Thanks for the replies

@decibel.places - I tried a few things but did not find an obvious solution. I can play around with it a bit more but I was hoping someone may know the reason for the issue so that I can avoid it in the future. (See last paragraph below also)

@greg - I haven't posted to the web yet hence no site to visit yet. However, the html code and CSS code are complete - only two files exist yet. You are correct as well about the interpretation of the white space.

The reason for the extra space around the text "some text goes here" is due to the fact that firefox has a default style for the <p> tag and IE7 has a different one - I know I can correct this by defining the css style for the paragraph tag in the css file so it displays the same in both. (It is this kind of reasoning I'm trying to figure out for the white-space issue so that I can remember how to tackle it if it appears in another design.)

The "container" div houses the whole layout so it is opened first and closed last. It basically is used to centre everything on the screen and means any new layout divs will be related to it

The margin-top: 10px is used to push the whole footercontainer away from the content container by 10px. It shouldn't affect the contents of the footercontainer and I need it to maintain the desired layout.

I was able to get it to appear as desired in IE7, Firefox, and Safari by making the footercontainer div height = 100px as well. This is the same height as the footer div. I believe that although it does produce the desired result it is not strictly correct as the padding is then forcing it out to an actual onscreen size of 104px.

Dog Training Videos | PS Vita Game Downloads | Hunting Tips | Skeet Shooting

chrissp26 posted this at 10:28 — 29th December 2008.

They have: 1 posts

Joined: Dec 2008

You could try something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body {
	background: #EFEFDF;
	background-color: #EFEFDF;
	padding: 0;
	margin: 10px auto;
	text-align: center; /*** Used for older browser support ***/
}

/*** Main Container - This is used to contain the entire site ***/

#container {
	background:#EFEFDF;
	color:#303030;
	margin: 0 auto;
	padding:0;
	text-align:left;
	width:1000px;
}

#headercontainer {
	background:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
}

#header {
	background: #FFFFFF;
	height: 100px;
}

#navbar {
	padding: 10px;
	color:#999999;
	max-height: 40px;
	font:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;

}

#content {
margin-top: 10px;
}

#contentleft {
	float:left;
	width:800px;
	background:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
	margin-right: 10px;
}

#contentright {
	width: 178px;
	background:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
}

#clearme {
	clear:both;
}

#footercontainer {
	margin-top: 10px;
	background:#FFFFFF;
	border: solid 1px #DDDDCA;
	padding: 2px;
	clear:both;
}

#footer {
	background: #313131;
	height: 100px;
	color:#FFFFFF;
	padding: 10px;
}

</style>
</head>

<body>
<div id="container">

	<div id="headercontainer">
		<div id="header"></div>
		<div id="navbar">Home | Articles | Content | Videos | Sitemap | Contact</div>
	</div>

	<div id="content">
		<div id="contentleft">
			<p>Some Text Goes Here</p>
		</div>

		<div id="contentright">
			<p>Menu might go here</p>
		</div>
	</div>

	<div id="clearme"></div>

	<div id="footercontainer">
		<div id="footer">Designed by Me</div>
	</div>

</div>

</body>
</html>