You could try something like

chrissp26 — Mon, 29 Dec 2008 10:28:59 +0000

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>

greg wrote: A link to the

decibel.places — Tue, 23 Dec 2008 17:11:10 +0000

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:

Hi Guys, Thanks for the

Telemicus — Mon, 22 Dec 2008 17:49:13 +0000

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.

A link to the website makes

greg — Sun, 21 Dec 2008 23:19:00 +0000

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;

Hi Telemicus, I don't have

decibel.places — Sun, 21 Dec 2008 19:40:28 +0000

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