Jump to content

Archived

This topic is now archived and is closed to further replies.

cmgmyr

Spacing Problems in FF

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.