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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer height problems

    Hey all, I want a footer on my site that will stay at the bottom of the browser window. I've read a bunch of different methods for doing this and pieced something together that I think seems to work pretty well. For the most part it is working.

    However, earlier today I attempted to add more text to a page (previously I had kept things relatively short and simple), and my girlfriend who was accessing it on a laptop with a smaller resolution than me complained that the footer was overlapping the text box.

    I've been trying to fix it so that even at small resolutions the footer will not overlap the text box. I thought I could accomplish this by setting a min-height to the container that I put everything in. However, in IE8, it still overlaps. It seems to work fine in Chrome/Firefox.

    Would anyone be able to take a look at what I'm doing here and provide some assistance? Also, is there a way to accomplish this without defining an absolute min-height? If there's a way to make it more dynamic, that'd probably be better.

    Example page: http://test.clylla.com
    Chrome/IE8 Comparison with CSS: http://test.clylla.com/footerproblem.png

    CSS:
    Code:
    body {background-color:#006090; color:White;}
    
    html, body {margin:0; padding:0; height:100%;}
    
    #container {height:100%; min-height:600px; position:relative;}
    
    #header {background-color:Black; color:White; position:relative; top:15px; left:15px; height:80px; width:420px;}
    #header img {border:none}
    
    #navbar {text-align:center; background-color:#003060; color:White; position:relative; top:30px; height:25px; width:100%;}
    #navbar a, a.visited {color:White; text-decoration:none; text-align:center;}
    #navbar a.hover {color:White; font-weight:bold; text-decoration:none; text-align:center;}
    
    #contentarea {padding-bottom:1.5em;}
    
    #content {border:solid thick black;  padding:5px 20px 20px 20px; background-color:FFFFFF; color:Black; position:relative; top:55px; left:15px; height:auto; width:70%;}
    
    #footer {clear:both; text-align:center; background-color:#003060; color:White; position:absolute; bottom: 0; z-index:10; height:1.5em; margin-top:-1.5em; width:100%;}
    #footer a, a.visited {color:White; text-decoration:none; text-align:center;}
    #footer a.hover {color:White; font-weight:bold; text-decoration:none; text-align:center;}
    HTML:
    Code:
    <html> 
    <head> 
    <title>Grand Chase - Clylla Game & Guild Portal</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     
    <div id=container> 
     
    	<div id=header> 
    		<img src="http://www.clylla.com/images/header.jpg"> 
    	</div> 
     
    	<div id=navbar> 
    		<a href="index.shtml">Home</a> <b>|</b> 
    		<a href="http://gc.clylla.com/forum">Forums</a> <b>|</b> 
    		<a href="links.shtml">Links</a> 
    	</div> 
     
    	<div id=contentarea> 
    		<div id=content> 
    			<p>Hello, and welcome to the Aura guild page!</p> 
    			<p>Aura is a casual, socially-oriented guild in the MMORPG "Grand Chase." It is still quite new, so our members are still getting to know each other. We welcome players at any level from around the world, and we only ask that you be active and abide by our Guild Rules as well as the Terms of Use set by Ntreev.</p> 
    		</div> 
    	</div> 
     
    	<div id=footer> 
    		Part of the Clylla.com Game & Guild Portal - <a href="http://www.clylla.com">Home</a> <b>|</b> <a href="mailto:webmaster@clylla.com">Contact</a> 
    	</div> 
     
    </div> 
     
     
     
    </body> 
    </html>
    Thanks a bunch for taking a look!

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Instead of absolute positioning you could try something like what is listed here:
    http://www.visibilityinherit.com/cod...r-centered.php

    I will forewarn that I have not tested this method personally, and that I have come across issues in the past caused by negative margins (which this method requires). It still might work for your purposes, though.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

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