grabenair Posted March 24, 2011 Report Posted March 24, 2011 I have a small gap between the main content and the footer. I had one between the main content and the main nav. I fixed that by experimenting and found that when I put the margin to 0 on the top instead of just leaving it blank,DWCS4, it salved the problem but does not work on the footer. I could just fix this by making my wrapper the same color as my main content but that leaves my border short. body { background-image: url(../imgs/texture.jpg); } #wrapper { background-color: #C99; width: 960px; margin-right: auto; margin-left: auto; border: thin solid #000; } #header { height: 120px; width: 960px; } #main_nav { background-color: #FFF; width: 960px; height: 42px; } #left_sidebar { width: 200px; background-color: #F00; height: 200px; float: left; border-top-width: thin; border-top-style: solid; border-top-color: #000; } #main_content { width: 748px; background-color: #FFF; margin-left: 200px; padding-left: 10px; margin-top: 0px; border-top-width: thin; border-top-style: solid; border-top-color: #000; border-left-width: thin; border-left-style: solid; border-left-color: #9D9D9D; margin-bottom: 0px; } #main_nav img { margin-left: 178px; padding-top: 10px; } #footer { width: 960px; font-size: 10px; text-align: center; background-color: #FFF; height: 15px; } Quote
PicnicTutorials Posted March 24, 2011 Report Posted March 24, 2011 Hello, upload the link instead. Quote
grabenair Posted March 24, 2011 Author Report Posted March 24, 2011 (edited) Eric I just uploaded the page to my server. I can leave it up for a few hours as I took down the site and put up this revised page I am working on Thank You. http://www.roxanesmarine.com PS I will be using short hand CSS just forgot to so far. I am still learning to use short hand Edited March 24, 2011 by grabenair Quote
Andrea Posted March 24, 2011 Report Posted March 24, 2011 You wouldn't happen to have that page up online somewhere and can send a link? That makes it so much easier to help - and besides, we'd need to see the HTML too, just to make sure the issue isn't in there somehow. Or - have you tried * {margin: 0; padding: 0;} ? Quote
grabenair Posted March 24, 2011 Author Report Posted March 24, 2011 I now have the page on line forgot to move it to the right file on my server sorry. http://www.roxanesmarine.com Quote
grabenair Posted March 24, 2011 Author Report Posted March 24, 2011 oh ya it is really ugly still working on it Quote
falkencreative Posted March 25, 2011 Report Posted March 25, 2011 That gap is caused by the last <p> tag within #main_content, since it has a bottom margin that browsers automatically add to <p> tags. One easy fix for this is to add "overflow:hidden" to #main_content, so it encloses all the elements inside it properly. Also -- one quick note -- there's really no need to use blank <p> tags: <p> </p>. If you need to add some additional space, adding a bottom margin or padding on #main_content instead. Quote
grabenair Posted March 25, 2011 Author Report Posted March 25, 2011 The blank <p> tag is for an imag i havent put in yet. Thanks I will try this Quote
grabenair Posted March 25, 2011 Author Report Posted March 25, 2011 I fixed this prob. I just made the main content and left sidebar to height when I got the rest of the page done instead of letting the content set the height works for now thanks everbody Quote
Andrea Posted March 25, 2011 Report Posted March 25, 2011 Setting the height will be an issue if different pages have different amounts of content. Quote
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.
Note: Your post will require moderator approval before it will be visible.