locked
Minor problem, but I can't figure it out RRS feed

  • Question

  • My site is http://blackbeltnerds.com/sandbox/index.html. I'm in the process of switching from the +/- method of making equal height columns to using faux columns. You can look at the production site (http://www.blackbeltnerds.com) for the original code, if that's needed. However, I'll type out what I removed at the bottom of this.

    The problem is that there is a line of white at the bottom of the screen, between the footer and either the container div or one of the ones inside it. I can't figure out where it came from, nor can I see how to get rid of it.

    I'm only including the code dealing with this section to save space, as I didn't change anything else.

    There were three things I thought might be causing it: The old float on the navpanel div, the margin-top: 0 on the right container div, and the clear: both on the footer. So, I tried it with each on and off, but no luck.

    I appreciate any help!

    Thanks!

    Jim

     

    Here's the relevant code:

    Old (relevant) code (bolded stuff was removed):

    #container {
    	border-top-width: 10px;
    	border-top-color: #314493;
    	border-top-style: solid;
    	<strong>overflow: hidden;
    	min-height:400px;</strong>
    	width:960px
    }
    #leftcontainer {
    	width: 200px;
    	<strong>padding-bottom: 3000px;
    	margin-bottom: -3000px;
    </strong>	background-color: #A8A8A8;
    	border-right-color: #314493;
    	border-right-width: 10px;
    	border-right-style: solid;
    }
    #navpanel {
    	<strong>float: left;
    </strong>	width: 200px;
    	height: auto;
    	position: fixed;
    	font-size: smaller;
    }
    #navpanel ul {
    	margin: 0;
    	padding: .25em .5em;
    	list-style: none;
    }
    #navpanel ul ul {
    	padding-left: .75em;
    }
    #rightcontainer {
    	margin-left: 2<strong>05</strong>px;
    	<strong>margin-top: 0px;
    </strong>	width: auto;
    	height: auto;
    	top: auto;
    	margin-bottom: -3000px;
    	padding: 0em 1em <strong>3000px</strong> 1em;
    }
    #page_content {
    	font-family: "Times New Roman", Times, serif;
    	text-align: justify;
    }
    
    

     

    New code (bolded stuff is added or changed):

     

    #container {
    	border-top-width: 10px;
    	border-top-color: #314493;
    	border-top-style: solid;
    	width: 960px;
    	<strong>background-image: url('Graphics/FauxColumnBackground.png');
    	background-repeat: repeat-y;
    </strong>}
    #leftcontainer {
    	width: 200px;
    	border-right-color: #314493;
    	border-right-width: 10px;
    	border-right-style: solid;
    }
    #navpanel {
    	width: 200px;
    	height: auto;
    	position: fixed;
    	font-size: smaller;
    }
    #navpanel ul {
    	margin: 0;
    	padding: .25em .5em;
    	list-style: none;
    }
    #navpanel ul ul {
    	padding-left: .75em;
    }
    #rightcontainer {
    	margin-left: 210px;
    	width: auto;
    	height: auto;
    	top: auto;
    	padding: 0em 1em <strong>0em</strong> 1em;
    }
    #page_content {
    	font-family: "Times New Roman", Times, serif;
    	text-align: justify;
    }
    
    

     

    Monday, January 16, 2012 8:48 AM

Answers

  • The space is caused by the margin-bottom of 1em on the paragraph. You might want to achieve spacing between paragraphs by using margin-top instead, or else explicitly set the margin-bottom to zero for that final paragraph. Of course, you can also use padding in the div to create space at the bottom without the unsightly full-width line.

    BTW, I'm not sure why your left menu is fixed position, but when viewing your page in a small window, scrolling down makes the menu drop down the page until it overlays the footer. Nothing critical, but it is a little disconcerting.

    Jim


    “I like nonsense, it wakes up the brain cells. Fantasy is a necessary ingredient in living, It's a way of looking at life through the wrong end of a telescope. Which is what I do, and that enables you to laugh at life's realities.” - Dr. Seuss
    • Marked as answer by Daddicus Tuesday, January 17, 2012 12:18 AM
    Monday, January 16, 2012 4:49 PM
  • for #container, set padding-bottom: 1px;

    This forces some space at the bottom of the container, which prevents the bottom margin of the last tag in #container from collapsing.

     


    Will
    Baltimore, MD USA - www.fastie.com
    • Marked as answer by Daddicus Monday, January 16, 2012 6:21 PM
    Monday, January 16, 2012 6:10 PM

All replies

  • The space is caused by the margin-bottom of 1em on the paragraph. You might want to achieve spacing between paragraphs by using margin-top instead, or else explicitly set the margin-bottom to zero for that final paragraph. Of course, you can also use padding in the div to create space at the bottom without the unsightly full-width line.

    BTW, I'm not sure why your left menu is fixed position, but when viewing your page in a small window, scrolling down makes the menu drop down the page until it overlays the footer. Nothing critical, but it is a little disconcerting.

    Jim


    “I like nonsense, it wakes up the brain cells. Fantasy is a necessary ingredient in living, It's a way of looking at life through the wrong end of a telescope. Which is what I do, and that enables you to laugh at life's realities.” - Dr. Seuss
    • Marked as answer by Daddicus Tuesday, January 17, 2012 12:18 AM
    Monday, January 16, 2012 4:49 PM
  • for #container, set padding-bottom: 1px;

    This forces some space at the bottom of the container, which prevents the bottom margin of the last tag in #container from collapsing.

     


    Will
    Baltimore, MD USA - www.fastie.com
    • Marked as answer by Daddicus Monday, January 16, 2012 6:21 PM
    Monday, January 16, 2012 6:10 PM
  • Thanks, guys!

    I had a hard time deciding which of your replies was "the" answer, because both helped. In the end, I used a 1em padding on the container div, and that did it, so I picked Will's reply.

    Jim: Yes, that's a problem. I thought it was "cool" to have the navigation menu appear to move with the page like that, but the bottom going over the edge is a problem. It's going to get worse, too, because I have a decoration picture that goes above and below it, and I suspect those likewise will cause issues (even bigger ones).

    But, I'm only fixing one thing at a time to keep my sanity. That one is third on my list. :)

    Thanks!!!

    Jim

    Monday, January 16, 2012 6:26 PM
  • If two answers helped, mark both.  There is no limit to just one marked answer. :)
    • Edited by KathyW2 Monday, January 16, 2012 9:02 PM
    Monday, January 16, 2012 7:05 PM
  • I agree with Kathy, mark em both.

     


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Monday, January 16, 2012 8:12 PM
  • Cool! I didn't know you could do that.

     

    Thanks!

    Tuesday, January 17, 2012 12:19 AM