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.com/index_with_Firefox_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;
}