Jump to content


Photo

Spacing Problems in FF


  • Please log in to reply
3 replies to this topic

#1 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 15 September 2006 - 04:11 PM

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
/*** 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;
}

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

Thanks,
-Chris

[attachment deleted by admin]

#2 Woolf

Woolf
  • Members
  • PipPipPip
  • Advanced Member
  • 41 posts

Posted 16 September 2006 - 05:53 PM

Try this.

/*** 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;
}

	<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>

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.

#3 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 16 September 2006 - 06:24 PM

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

#4 Woolf

Woolf
  • Members
  • PipPipPip
  • Advanced Member
  • 41 posts

Posted 16 September 2006 - 06:26 PM

Glad it worked.  :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users