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
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts

    Push (for footer) riding up.

    Okay, like many others I've got a problem with a footer. The push technique works well if there's enough in the main content, but the push itself rides up the page if there isn't.
    Example pages:
    good page
    bad page

    Relevant CSS:
    Code:
    html, body {
    	height: 100%;
    	font-family: Arial, sans-serif;
    	background:#CCC;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 780px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -50px;
    	text-align: left;
    	border-right: 1px solid #000000;
    	border-left: 1px solid #000000;
    }
    #header {
    	background:#03C;
    	width:780px;
    	height:75px;
    	top: 0px;
    	color:#FFF;
    }
    #main {
    	width:780px;
    	background:#FF9;
    	float:left;
    	text-align: left;
    	height:100%;
    }
    #left {
    	width:175px;
    	margin-top:20px;
    	float:left;
    	background:#FF9;
    	height:100%;
    }
    #right {
    	width:605px;
    	margin-top:20px;
    	float:left;
    	background:#FFF;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color:#444;
    	height:100%;
    }
    #footer, #push {
    	clear:both;
    	width: 780px;
    	height: 50px;
    	margin: 0 auto;
    	background:#999;
    	color:#000;
    	font-size:10px;
    	text-align:center;
    }
    xhtml:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <link href="mainstyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="header">
        <div id="nav2">
          <ul id="homelinks">
            <li><a href="index.html" name="top">Home</a></li>
            <li><a href="index.html">Contact</a></li>
          </ul>
        </div>
        <h3 class="headline">WEBSITE TITLE HERE</h3>
      </div>
      <div id="nav1">
        <ul id="links">
          <li id="about"><a href="index.html"><span>About</span></a></li>
          <li id="location"><a href="index.html"><span>Location</span></a></li>
          <li id="services"><a href="products.html"><span>Featured Products &amp; Services</span></a></li>
          <li id="blah"><a href="index.html"><span>Blah, Blah, &amp; more Blah</span></a></li>
        </ul>
      </div>
      <div id="main">
        <div id="left">
          <h5><a href="#cat_1">Category 1</a></h5>
          <ul>
            <li><a href="#prod_a">Product a</a> </li>
            <li><a href="#prod_b">Product b</a> </li>
          </ul>
          <h5><a href="#cat_2">Category 2</a></h5>
          <ul>
            <li><a href="#prod_c">Product c</a> </li>
            <li><a href="#prod_d">Product d</a> </li>
          </ul>
          <h5><a href="#cat_3">Category3</a></h5>
          <ul>
            <li><a href="#prod_e">Product c</a> </li>
            <li><a href="#prod_f">Product d</a> </li>
          </ul>
          <h5><a href="#cat_4">Category 4</a></h5>
          <ul>
            <li><a href="#prod_j">Product j</a><br/>
            </li>
            <li><a href="#prod_k">Product k</a><br/>
            </li>
          </ul>
          <h5><a href="#cat_5">Category 5</a></h5>
          <ul>
            <li><a href="#prod_l">Product l</a><br/>
            </li>
            <li><a href="#prod_m">Product m</a><br/>
            </li>
          </ul>
        </div>
        <div id="right">
          <h2>Page Title</h2>
          <p class="descrip">Page description here. Page description here. Page description here.<br/>
            Page description here. Page description here. Page description here.<br/>
            Page description here. Page description here.</p>
          <div class="product" style="margin-bottom:20px;">
            <h3 class="title"><a name="cat_1">CATEGORY 1</a></h3>
            <hr />
            <ul>
              <li>
                <div class="text">
                  <h4><a name="prod_a">Product a</a></h4>
                  <p>Product description. Product description. Product description. Product description. Product description.</p>
                  <p>Product description. Product description. Product description.</p>
                </div>
                <div class="product_pic"><img src="images/image1.gif" width="165" height="110" alt="" /></div>
              </li>
              <li>
                <div class="text">
                  <h4><a name="prod_b">Product b</a></h4>
                  <p>Product description. Product description. Product description. Product description. Product description.</p>
                  <p>Product description. Product description. Product description.</p>
                </div>
                <div class="product_pic"><img src="images/image1.gif" width="165" height="110" alt="" /></div>
              </li>
            </ul>
          </div>
          <a href="#top" class="return">Back To Top</a></div>
      </div>
      <div id="push"></div>
    </div>
    <div id="footer">
      <p>Copyright blah blah blah</p>
    </div>
    </body>
    </html>
    Last edited by Fisher; 03-09-2009 at 03:17 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Fisher,
    The push is supposed to be up there since it's only needed when it gets pushed within reach of the footer.
    Have you seen my example at http://nopeople.com/CSS/full-height-layout/index.html ? I'm sure you have by now since full height layouts seem to be the request of the week and I've been posting that link a lot lately.

    Anyway, check the source on that. There is a bit of inline coderemoving the background color from #push.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Fisher (03-09-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Thanks a lot. Yes I have seen your page. In fact I have a copy of it on my desktop and I think you must have just addded that inline code because I can't see it in my copy.

    That did the trick. I'll work on getting the div full height later on. Probably just change the container colour though.

    Thanks.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Fisher View Post
    Thanks a lot. Yes I have seen your page. In fact I have a copy of it on my desktop and I think you must have just addded that inline code because I can't see it in my copy.

    That did the trick. I'll work on getting the div full height later on. Probably just change the container colour though.

    Thanks.
    That was something I did just to keep the CSS neat and tidy, and to make positive sure #push didn't inherit a bg color from #footer. I should change that though - since I'm the first to complain about inline CSS when anyone else uses it!

    Is it really missing from your version?
    Edit: my version that has text in it did not have the inline style getting rid of the background color - oops!
    Last edited by Excavator; 03-09-2009 at 04:32 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Interesting bit of research here.
    I wanted to make sure background:none; got rid of the bg color on #push and make doubly sure that #push does not inherit a color from something else.

    The order of CSS is important, #push {background:none;} needs to go after the styling for #footer, #push that is setting a bg color.

    Then I was unsure whether I should use background:none; or background-color:transparent;
    Turns out, the shorthand background property sets all the individual properties to their initial values.
    Individual properties are:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    • inherit

    And background-color's initial value is transparent.

    In otherwords, either one works fine.

    see:http://www.w3.org/TR/CSS21/colors.ht...def-background
    Last edited by Excavator; 03-09-2009 at 05:16 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    I tried it both ways, but FF seems unaffected by the order. If I put either background-color:transparent or background:none at the beginning of the document, FF displays it the same as if I put the property after. In actuality, FF seems to be interpreting the CSS wrong, as using the shorthand value background later in the document should negate the first.

    IE6 cannot handle either of these values first though. It must come after the #push, #footer declarations. There is an interesting side-effect however that both left and right columns achieve their 100% height without any other help in IE6. The footer is pushed to below the window frame though.


  •  

    Posting Permissions

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