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 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts

    Footer isn't staying at bottom on IE

    I was following this tutorial here: http://ryanfait.com/resources/footer...ottom-of-page/

    My CSS:
    Code:
    html, body {
    	height: 100%;
    	margin: 0;
    	}
    
    #header {
    	width: 556px;
    	height: 50px;
    	background-image: url(logonog.png);
    	margin: 0 auto;
    }
    #wrapper {
    	width: 100%;
    	text-align: center;
    	min-height: 100%;
    	margin: 0 auto -4em;
    }
    
    #footer {
    	height: 4em;
    	background-color: #009933;
    }
    #push {
    	height: 4em;
    	background-color: #000099;
    }
    
    #body {
    	width: 556px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	margin: auto;
    	
    }
    My page code:
    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" xml:lang="en">
    
    
    <body>
     
    </div>
      <div id="wrapper">
      <div id="leftwand"></div>
      <div id="wandright"></div>
      <div id="rightwand"></div>
      <div id="header"></div>
      <div id="body">
        <p align="center">&nbsp;</p>
        <p align="center"><img src="intro.png" width="470" height="82" /></p>
        <form method="post" action="" name="form1" id="form1">
          <div align="center">
            <p>
              <input type="submit" value='' class="button" onMouseOver="this.style.cursor='pointer';" onClick="this.form.target='_blank'" name="getSite"/>
            </p>
          </div>
        </form>
      </div>
      <div id="push"></div>
    </div>
    <div id="footer">footer goes here</div>
    </body>
    </html>
    Before the code shown above I have some PHP and before the PHP I have this:
    Code:
    <head>
        <link href="layout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	background-image: url(bg.jpg);
    }
    .style4 {font-family: "Book Antiqua"}
    -->
    </style>
    </head>
    I know IE is very picky so I'm guessing it's something in my page code.

    Thanks in advance!
    Last edited by Flames; 06-11-2012 at 02:46 AM.

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello

    Quote Originally Posted by Flames View Post
    Code:
    #wrapper {
    	margin: 0 auto -142px;
    }
    
    #footer {
    	height: 4em;
    }
    
    #push {
    height: 4em;
    }
    I think the negative margin should be the same as your footer's height: -4em.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Still doesn't work

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Don't be crazy, you just follow a bad tutorial, try my style.

    Css
    Code:
    html, body { height:100%; overflow:auto; margin:0;}
    header {background-color:#f00; min-height:10%; }
    #Main {background-color:#0f0; min-height:80%; }
    footer {background-color:#00f; min-height:10%; }
    Html
    Code:
    <header>Head</header>
    <div id="Main">Body</div>
    <footer>Foot</footer>
    If it isn't header or footer, add them into main div and try not to name your element's id like "body", "head" or "html"

  • #5
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Flames View Post
    Still doesn't work
    Here, now the footer does stays at the bottom with your code...
    What browser are you testing with? Do you have a doctype on the top of your document ?
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Flames,
    There is nothing wrong with the tutorial you followed to build this page... you've just made a few mistakes.

    Why would you put a height: 300px on #body? Remove that and see what happens.

    Code:
    html, body {
    	height: 100%;
    	margin: 0;
    	background: #fc6;
    }
    #body {
    	width: 556px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	margin: auto;
    	z-index: 1; /*this isn't doing anything*/
    }
    #wrapper {
    	width: 100%;
    	text-align: center;
    	min-height: 100%;
    	height: auto;!important; /*a default setting made important? Really?*/
    	margin: 0 auto -4em; /*a good suggestion from candygirl*/
    }
    #header {
    	height: 50px;
    	width: 556px;
    	margin: 0 auto;
    	background: #00f url(logonog.png); /*added a color since I don't have your images*/
    }
    #footer {
    	height: 4em;
    	background-color: #666666;
    }
    #push { height: 4em; }

    Instead of the push method, I prefer this full height layout.
    Last edited by Excavator; 06-10-2012 at 10:23 PM.
    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

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Ok, now the footer is working but not on IE.

    My CSS:
    Code:
    html, body {
    	height: 100%;
    	margin: 0;
    	}
    
    #header {
    	width: 556px;
    	height: 50px;
    	background-image: url(logonog.png);
    	margin: 0 auto;
    }
    #wrapper {
    	width: 100%;
    	text-align: center;
    	min-height: 100%;
    	margin: 0 auto -4em;
    }
    
    #footer {
    	height: 4em;
    	background-color: #009933;
    }
    #push {
    	height: 4em;
    	background-color: #000099;
    }
    
    #body {
    	width: 556px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	margin: auto;
    	
    }
    My page code:
    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" xml:lang="en">
    
    
    <body>
     
    </div>
      <div id="wrapper">
      <div id="leftwand"></div>
      <div id="wandright"></div>
      <div id="rightwand"></div>
      <div id="header"></div>
      <div id="body">
        <p align="center">&nbsp;</p>
        <p align="center"><img src="intro.png" width="470" height="82" /></p>
        <form method="post" action="" name="form1" id="form1">
          <div align="center">
            <p>
              <input type="submit" value='' class="button" onMouseOver="this.style.cursor='pointer';" onClick="this.form.target='_blank'" name="getSite"/>
            </p>
          </div>
        </form>
      </div>
      <div id="push"></div>
    </div>
    <div id="footer">footer goes here</div>
    </body>
    </html>
    Before the code shown above I have some PHP and before the PHP I have this:
    Code:
    <head>
        <link href="layout.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	background-image: url(bg.jpg);
    }
    .style4 {font-family: "Book Antiqua"}
    -->
    </style>
    </head>
    I know IE is very picky so I'm guessing it's something in my page code.

    Thanks in advance!
    Last edited by Flames; 06-11-2012 at 02:35 AM.

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    31
    Thanks
    10
    Thanked 2 Times in 2 Posts
    For some reason I didn't set my wrapper height to 100%. Thank anyway guys! I'm so damn happy now that I got it.

  • #9
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by Excavator View Post
    Code:
    #wrapper {
    	height: auto !important; /*a default setting made important? Really?*/
    }
    I guess this was to use the height 100% trick for IE6...
    Good point for the height 300px (I didn't test with any content and didn't watch the entire code :x)

    @Flames

    Setting the Wrapper height to 100% should be usefull only for IE6 and under (as it does not support the min-height property). In all newer IE the height 100% is not usefull.

    As I've allready mentioned it in your other post, you might have some rendering engine problem, if IE7 and over need the 100% height.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

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