DIVs behaving different in FF3

[burginsteve]

I'm building a site and it works fine in IE7 but when I view it in FF3 some of the DIVs are behaving different. My homepage is OK but this page isn't... http://www.thinkjessica.com/misc/campaign.htm

If you're asked for username/password it is think/jessica.

I've W3C validated my homepage and CSS OK but there must be something wrong. Here's my CSS, any ideas would be appreciated.



body {
background: #FFFFFF;
font-family: "Trebuchet MS", Tahoma, Verdana, Sans-serif;
color: #666699;
font-size: 16px;
}

img {
border: none;
}

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


#wrapper{
width: 970px;
margin: 0px auto;
border: 1px solid #CCCCCC;
background: url(../images/bkg_wrapper.jpg) no-repeat right top;
}

#head {
height: 100px;
}

#header {
height: 128px;
background: #AC0102;
}

#logo {
float: left;
margin: 10px 0px 0px 30px;
}
#head-image {
float: left;
margin: 20px 0px 0px 131px;
}

#header-1 {
float: left;
width: 200px;
margin: 0px;
}
#header-2 {
float: left;
width: 250px;
margin: 0px;
}
#header-3 {
float: left;
width: 250px;
margin: 0px;
}
#header-4 {
float: left;
width: 250px;
margin: 0px;
}
#page-title {
float: left;
margin: 0px;
}

#body-1 {
float: left;
width: 175px;
height: 295px;
padding: 20px 5px 0px 20px;
margin: 0px;
background: #E2E2E2;
}
#body-2 {
float: left;
width: 250px;
margin: 0px;
}
#body-3 {
float: left;
width: 500px;
height:419px;
margin: 0px;
}
#body-3w {
float: left;
width: 430px;
margin: 0px;
padding: 35px;
background: #FFFFFF;
}

#body-wide {
width: 900px;
margin: 0px;
padding: 35px 20px 0px 35px;
}

#body-story {
width: 710px;
margin: 0px;
padding: 20px 0px 0px 140px;
}

#body-half-wide {
float: left;
width: 470px;
margin: 0px;
padding: 35px 20px 20px 35px;
}
#body-half-wide2 {
float: left;
width: 360px;
margin: 185px 0px 0px 0px;
padding: 35px 25px 20px 30px;
background: #F3F3F3;
}
#body-half-wide3 {
float: left;
width: 360px;
margin: 45px 0px 0px 0px;
padding: 35px 25px 20px 30px;
background: #F3F3F3;
}

#body-logos {
width: 200px;
margin: 0px;
padding: 35px 20px 20px 35px;
}
#body-news-date {
float: left;
width: 150px;
margin: 0px;
padding: 0px 20px 20px 35px;
}
#body-news-media {
float: left;
width: 260px;
padding: 0px 20px 0px 0px;
}
#body-news-comment {
float: left;
width: 380px;
padding: 0px 0px 0px 0px;
}
#body-contact {
float: left;
width: 680px;
margin: 10px 0px 0px 30px;
padding: 0px 0px 0px 100px;
background: url(../images/bkg_contact.gif) no-repeat right top;
}

#body-image {
float: left;
margin: 0px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#body-link-logo {
float: left;
margin: 20px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#body-link {
float: left;
width: 500px;
margin: 20px 0px 0px 0px;
}
#body-comment {
float: left;
width: 250px;
margin: 20px 0px 0px 0px;
}
#Red-comment18{
width: 870px;
margin: 0px auto;
color: #CC0000;
font-style: italic;
font-weight: bold;
font-size: 22px;
}

.red {
color: #CC0000;
font-style: italic;
font-weight: bold;
}
.red18 {
color: #CC0000;
font-style: italic;
font-weight: bold;
font-size: 22px;
}

a.jump:link {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump:active {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump:visited {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump:hover {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #FFA56B; text-decoration: none;}

a.jump1:link {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump1:active {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump1:visited {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump1:hover {font: 16px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #FFA56B; text-decoration: none;}

a.jump2:link {font: 12px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump2:active {font: 12px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump2:visited {font: 12px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #333333; text-decoration: underline;}
a.jump2:hover {font: 12px "Trebuchet MS", Tahoma, Verdana, Sans-serif; color: #FFA56B; text-decoration: none;}

.inputForm {
font-size: 16px;
font-weight: normal;
color:#333333;
border: 0px solid #FFFFFF;
background-color: #FFFFFF;
}
#bottom-wrapper{
width: 970px;
margin: 0px auto;
}
#bottom-left {
float: left;
margin: 0px;
}
#bottom-right {
float: right;
margin: 0px;
}

#w3c-wrapper{
width: 970px;
margin: 0px auto;
}

[jscheuer1]

At the bottom there, the style for #Red-comment18 should include:


#Red-comment18{
width: 870px;
margin: 0px auto;
color: #CC0000;
font-style: italic;
font-weight: bold;
font-size: 22px;
clear: left;
}

The rest of it (what I noticed at least, starting with "The Think Jessica campaign is three fold...") seems to be the difference between the default margins for the p element in IE and FF, although there may be some uncleared float(s) involved in that too, which (if any) when fixed may no longer be an issue with margin. A float technically has no layout height unless cleared, but IE often ignores this.

Now, as for the margin on the p element, if that's all it is, for FF setting it:


p {
margin: 2em;
}

seemed about right.

[burginsteve]

Thanks for that John.

Bit of a newbie and not familiar with clear: left and un-cleared float(s)... is it good practice to clear all float(s)

[jscheuer1]

Yes, it is a good practice, especially because of what you are dealing with - IE clearing them automatically and FF (really just about all others) not. In a browser that follows the standards on floats, clearing them allows them to (assuming no other valid style height has been assigned to them) grow to the natural layout height of their contents, which is usually desirable.

Although, if you clear all floats, depending upon the intended layout, you may not get much, if any floating action. They all should generally be cleared before normal document flow can be restored.

One clear of left will clear all previous floated left elements, one clear of right, the same for all previous right floated elements. One clear: both; will clear all previous floated elements.

The time that you must clear them is when you no longer want them to float to the side of the element with the clear property. Setting the clear is a very literal style, it means the element with the clear will have a hard line-break between the float above it and itself.

[burginsteve]

Thats helped as lot, thanks so much