Jump to content

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]
Link to comment
https://forums.phpfreaks.com/topic/20880-spacing-problems-in-ff/
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.
Link to comment
https://forums.phpfreaks.com/topic/20880-spacing-problems-in-ff/#findComment-93118
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.