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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning a footer with CSS

    I'm trying to position a footer with CSS using the "FooterStickAlt" method described here: http://www.themaninblue.com/writing/...ve/2005/08/29/

    I applied it to my site and it works fine, but IE (both 6 & 7) strangely puts a margin on the bottom of the page. This is very frustrating as it ruins the design of the footer.. I've tried fixing it with conditional statements but I haven't had any luck; I can't figure out what the problem is.

    Here's the page I'm working on: http://66.177.54.253/allegory/index.php

    Here is the relevant CSS from the page:

    Code:
    body,h1, h2,h3,p,ul {
    	margin: 0;
    	padding: 0;
    }
    
    html {
    	height: 100%;
    }
    
    body {
    	height: 100%;
    	font-family: "hoefler text", georgia, serif;
    	background: url(../images2/penrosebg.png) no-repeat center center fixed #5b5a4e;
    	color: #2E2D27;
    }
    
    * html #container {
    	height: 100%;
    }
    	
    #container {
    	position: relative;
    	min-height: 100%;
    	width: 919px;
    	z-index: 1;
    	margin: 0 auto 0 auto;
    	border: 1px solid #545245;
    	border-top: 0;
    	border-bottom: 0;
    	background: url(../images2/page-middle.png) repeat-y center center #3D3C33;
    }
    
    
    #footer {
    	z-index: 8;
    	position: relative;
    	height: 52px;
    	margin: 0 auto 0 auto;
    	width: 922px;
    	border-top: 3px solid #898A7B;
    	background: url(../images2/border3.gif) repeat-y center center #FDFFED;
    }
    #widefooter {
    	position: relative;
    	bottom: 0;
    	left: 0;
    	height: 55px;
    	margin: -56px 0 0 0;
    	width: 100%;
    	z-index: 3;
    	border-top: 1px solid #545245;
    	background: url(../images2/border.gif) repeat-x 0 top #FDFFED;
    }
    Can anyone else figure this out?

    Thanks.

  • #2
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In your body section at the top of your code, try changing the margin line to : "Margin: 0 0 0 0;"

    This is a stupid IE flaw

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    on small websites I usually use something like this

    * {
    margin: 0;
    padding: 0;
    }

    to make sure that all elements has the defaults I give it, for larger websites it might get a little slow, but then you can explicitly do the same for the tags you need to, at least be aware that different browsers has different default values.
    m6.net - windows webhosting
    my readlog - what I read

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I added both of those but I'm still having the same problem.

    I'm gonna try recoding the CSS from scratch and see if I can identify the problem..

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, I redid the entire CSS and it turns out the only problem was that I used height: 100%; on an element in the footer instead of just using pixels...

    Edit: nope nevermind, it's still broken -.-

    K, apparently adding overflow: hidden; to the element fixes it. I have no idea why, but it works..
    Last edited by Arst; 01-25-2008 at 01:55 AM.


  •  

    Posting Permissions

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