Spacing Problems in FF

[cmgmyr]

Hey all,
I have a little spacing problem in FF with this menu system. It works fine when it is all by itself but when I put it in the main file it gets all messed up.

Here is the css
[code]/*** Main CSS ***/
body {
background-color:#FFFFFF;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-image:url(../images/bg1.gif);
background-repeat:repeat;
}
a:link {
color: #00CCFF;
text-decoration: none;
background-color:inherit;
}
a:visited {
text-decoration: none;
color: #00CCFF;
background-color:inherit;
}
a:hover {
text-decoration: none;
color: #000000;
background-color:inherit;
}
a:active {
text-decoration: none;
color: #00CCFF;
background-color:inherit;
}

/*** Layout ***/
#body_wrapper {
text-align: left;
width:760px;
background-color:#FFFFFF;
color:#000000;
margin-left:auto;
margin-right:auto;
}
#top{
height:24px;
width:760px;
}
#top_lower{
height:47px;
width:760px;
background-image:url(../images/3.gif);
}
#top_links{
text-align:right;
padding-top:20px;
padding-right:50px;
}
#main_top{
width:760px;
height:148px;
}
#links{
width:760px;
height:32px;
}
#links_bod_sep{
width:760px;
height:44px;
}
/*** Main ***/
#maincontent{
width:760px;
background-image:url(../images/main_middle.gif);
}
#main{
padding-left:40px;
padding-right:40px;
}
#main .title{
color:#000000;
background-color:#FFFFFF;
font-weight:bold;
text-align:center;
}
#main p{
margin:0px;
padding:5px;
}
.title{
color:#000000;
background-color:#FFFFFF;
font-weight:bold;
}
#footer_sep{
width:760px;
height:21px;
}
#footer{
width:760px;
height:34px;
background-image:url(../images/footer.gif);
text-align:center;
}
#bottom{
width:760px;
height:19px;
}
/*** Other Stuff ***/
img{
border:0px;
}
.wrong{
color:#FF0000;
background-color:inherit;
}
.correct{
color:#33CC00;
background-color:inherit;
}
.answer{
font-weight:bold;
}
input
{
color: #000;
background-color: #eaf0da;
border: 1px solid #96bd38;
}
.error{
color:#FF0000;
background-color:#FFFFFF;
font-weight:bold;
}
.plate{
width:203px;
margin:8.5px;
}
.plate .top .text{
background-image:url(../images/plate_01.gif);
width:137px;
height:24px;
float:left;
font-weight:bold;
}
.plate .middle{
background-image:url(../images/plate_04.gif);
clear:both;
}
.plate .bottom{
height:8px;
}[/code]

the live version is http://www.e-resolutions.org/users.php

Thanks,
-Chris

[attachment deleted by admin]

[Woolf]

Try this.

[code=CSS]/*** Main CSS ***/
body {
background-color:#FFFFFF;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-image:url(../images/bg1.gif);
background-repeat:repeat;
}
a:link {
color: #00CCFF;
text-decoration: none;
background-color:inherit;
}
a:visited {
text-decoration: none;
color: #00CCFF;
background-color:inherit;
}
a:hover {
text-decoration: none;
color: #000000;
background-color:inherit;
}
a:active {
text-decoration: none;
color: #00CCFF;
background-color:inherit;
}

/*** Layout ***/
#body_wrapper {
text-align: left;
width:760px;
background-color:#FFFFFF;
color:#000000;
margin-left:auto;
margin-right:auto;
}
#top{
height:24px;
width:760px;
}
#top_lower{
height:47px;
width:760px;
background-image:url(../images/3.gif);
}
#top_links{
text-align:right;
padding-top:20px;
padding-right:50px;
}
#main_top{
width:760px;
height:148px;
}
#links{
width:760px;
height:32px;
}
#links_bod_sep{
width:760px;
height:44px;
}
/*** Main ***/
#maincontent{
width:760px;
background-image:url(../images/main_middle.gif);
}
#main{
padding-left:40px;
padding-right:40px;
}
#main .title{
color:#000000;
background-color:#FFFFFF;
font-weight:bold;
text-align:center;
}
#main p{
margin:0px;
padding:5px;
}
.title{
color:#000000;
background-color:#FFFFFF;
font-weight:bold;
}
#footer_sep{
width:760px;
height:21px;
}
#footer{
width:760px;
height:34px;
background-image:url(../images/footer.gif);
text-align:center;
}
#bottom{
width:760px;
height:19px;
}
/*** Other Stuff ***/
img{
border:0px;
}
.wrong{
color:#FF0000;
background-color:inherit;
}
.correct{
color:#33CC00;
background-color:inherit;
}
.answer{
font-weight:bold;
}
input
{
color: #000;
background-color: #eaf0da;
border: 1px solid #96bd38;
}
.error{
color:#FF0000;
background-color:#FFFFFF;
font-weight:bold;
}
.plate{
width:203px;
margin:8.5px;
}
.plate .top .text{
background-image:url(../images/plate_01.gif);
width:137px;
height:24px;
float:left;
font-weight:bold;
}

.plate .middle{
background-image:url(../images/plate_04.gif);
}
.plate .bottom{
  background-image:url(../images/plate_05.gif);
  background-repeat: no-repeat;
height:8px;
}[/code]

[code=HTML]
<div id="maincontent">
<div id="main"><!-- TemplateBeginEditable name="Main" --><div style="float:left;width:210px"><div class="plate">

<div class="top">
<div class="text"><div style="padding-left:5px;padding-top:5px;">Manage Account</div></div><div style="float:left;"><img src="images/plate_02.gif" width="31" height="24" alt=""><img src="images/plate_03.gif" width="35" height="24" alt=""></div></div>


<div class="middle">
<div style="padding:5px;"><img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php" title="Member Home">Member Home</a><br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Update_Account" title="Update Account Information">Update Account Information</a><br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Membership" title="Membership Information">Membership Information</a><br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Donations" title="Membership Contributions">Membership Contributions</a><br />

<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Change_Pwd" title="Change Password">Change Password</a> <br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Logout" title="Logout">Logout</a></div></div>

<div class="bottom"></div>

</div>

<div class="plate">

<div class="top">

<div class="text"><div style="padding-left:5px;padding-top:5px;">Participate</div></div><div style="float:left;"><img src="images/plate_02.gif" width="31" height="24" alt=""><img src="images/plate_03.gif" width="35" height="24" alt=""></div></div>

<div class="middle">
<div style="padding:5px;"><img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Poll" title="Take Poll">Take Monthly Poll</a><br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Quiz" title="Take Monthly Quiz">Take Monthly Quiz</a> <br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Discussions" title="Discussions">Discussions</a></div></div>


<div class="bottom"></div>

</div>

<div class="plate">

<div class="top">
<div class="text"><div style="padding-left:5px;padding-top:5px;">Progress & Goals</div></div><div style="float:left;"><img src="images/plate_02.gif" width="31" height="24" alt=""><img src="images/plate_03.gif" width="35" height="24" alt=""></div></div>

<div class="middle">
<div style="padding:5px;"><img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Verify" title="Accept the Great American Diet Challenge">Accept the GAD! Challenge</a><br />

<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Goals" title="Personal Weight Goal">Personal Weight Goal</a> <br />
<img src="images/arr.gif" alt="a" width="8" height="7" /> <a href="users.php?cmg=Progress" title="Your Weight Progress">Your Weight Progress</a></div></div>

<div class="bottom"></div>

</div></div>[/code]

In the HTML, I removed the image in the 'bottom' div, and then set the div to have it as a background. I also modified some other parts of the CSS. Let me know if there are any problems.

[cmgmyr]

Thanks for the help. What you had messed up a few other things, but what I did was took out the clear in the middle section, and used what you had for the bottom in the css and it worked great. Thanks for the help!

-Chris

[Woolf]

Glad it worked.  :)