Displays different in Firefox

[burginsteve]

Learning fast but not fast enough!

I know Firefox is less forgiving than IE7 but I cannot see why this page displays OK in IE7 but the last DIV is lower than the 'wrapper div' in Firefox.

Here's the link http://www.advancedfencingsystems.co...efox_error.htm

And here's my CSS...

html,body {
    width: 100%;
    height: 100%;
}

body {
	background: #E7E7E7 url(../images/bkg_gray6.jpg) repeat-x top left;
	font-family: "Trebuchet MS", Tahoma, Verdana, Sans-serif;
	color: #666699;
	font-size: 16px;
}

img {
    border: none;
}

form {
    margin: 0px;
    padding: 0px;
}


#wrapper{
	width: 850px;
	margin: 0px auto;
	border: 1px dashed #CCCCCC;
	background: #FFFFFF;
}

#head {
	height: 212px;
}

#head-left {
	float: left;
	height: 212px;
}
#head-top {
	float: left;
	width: 730px;
	height: 112px;
	background: #E7E7E7;
}
#head-menu {
	float: left;
	width: 730px;
	height: 25px;
	background: #ffcc00;
}
#head-phone {
	float: left;
	width: 730px;
	height: 75px;
	background: #E7E7E7;
}

#content {
	width: 850px;
	background: url(../images/side_1.jpg) no-repeat top left;
}

#cont-main {
	float: left;
	margin: 30px 0px 0px 150px;
	clear: left;
}

Any clues to the problem?

[rangana]

Try setting a height on content div:

#content {
	width: 850px;
	border:1px solid red;
	height:50px;
	background: url(../images/side_1.jpg) no-repeat top left;
}