Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    Body background showing up where it shouldn't

    Hi.

    Can one of you wizards tell me why this page:

    http://radified.com/index.rad

    .. has a little bit of the background graphic showing up at the top and bottom of the center "mainContent" div (which I named "radEntries").

    I'm normally pretty good with CSS but can't figure out this one.

    It's easier to see at the bottom of the page .. where the "mainContent" div meets the footer. Harder to see at the top where it meets the header.

    Thanks.
    Last edited by PonchoX; Sep 15th, 2009 at 02:40 AM.

  2. #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    First, you need to remove the <br> tag from the bottom:
    Code:
    <br class="clearFloat" />
    Then add:
    Code:
    .validator {margin:0}
    to your CSS. This will fix the bottom part.

    You'll have to similarly remove margin or padding from the offending part at the top.

    You could have avoided this by starting your CSS (always!) with *{margin:0;padding:0;}, but if you do it now you'd be in for a shock at the effect it has on your page.

  3. #3
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Thank-you, kindly. You *are* a wizard.

    So basically the margins of first and last elements .. nearest the top and bottom of that div .. were causing the problem.

    What would you suggest I do to clear the floats in "#mainContent"?

    My Dreamweaver starter page says:

    This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats
    What if I display: none?? Will that both clear and hide?

    Update .. display: none gets rid of the graphic (at the bottom) .. but will that kill my clear?
    Last edited by PonchoX; Sep 15th, 2009 at 03:32 AM.

  4. #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Shouldn't affect your clear. Otherwise, you can just apply the clear to the footer (footsie).

    If you want the blue sidebars overlapping your footer, leave it the way it is. Otherwise, you'll have to make 3 more changes:
    Code:
    .gnarlyHybrid #sidebar1 {
    	float: left;
    	width: 11em;
    	background: #699;
    	padding: 0;
    }
    .gnarlyHybrid #sidebar2 {
    	float: right;
    	width: 11em;
    	background: #699;
    	padding: 0;
    }
    .rad {
    	background-color:#141414;
    	padding: 10px 6px 6px 6px;
    	border-right: 10px solid #699;
    	border-left: 10px solid #699;
    	text-align: center;
    	margin-top:15px;
    }

  5. Users who have thanked Fisher for this post:

    PonchoX (Sep 15th, 2009)

  6. #5
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Hi.

    Can't thank you enough. The more I use CSS, the more convinced I am it contains an element of black magic.

    I still get the over-lap in IE8.

    I see you eliminated the 15px padding I had set for the TOP of the sidebars. Why would the TOP padding affect the BOTTOM overlap?

    Funny how, after seeing things a certain way for a long time, we just get used to them. Takes someody pointing out a problem to bring it to our attention.

    I long ago rationalized away the bottom overlap problem by figuring not many visitors would be scrolling to the bottom .. especially after I put that menu bar at the top.

    What tools do you use to troubleshoot? Firefox plugins?
    Last edited by PonchoX; Sep 15th, 2009 at 05:34 AM.

  7. #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    15,060
    Thanks
    165
    Thanked 2,250 Times in 2,237 Posts
    What tools do you use to troubleshoot? Firefox plugins?
    Most probably be firebug!


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •