cmgmyr Posted September 15, 2006 Share Posted September 15, 2006 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.phpThanks,-Chris[attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Woolf Posted September 16, 2006 Share Posted September 16, 2006 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. Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted September 16, 2006 Author Share Posted September 16, 2006 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 Quote Link to comment Share on other sites More sharing options...
Woolf Posted September 16, 2006 Share Posted September 16, 2006 Glad it worked. :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.