Results 1 to 1 of 1

Thread: CSS Sticky Footer (CSS/JS)

  1. #1
    Join Date
    Nov 2005
    Posts
    18
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default CSS Sticky Footer - Please Help

    Hi there,

    I need some help dealing with min-height in Opera, Safari, and Omniweb. They all basically have the same issue, no support for min-height which is causing my footer to get stuck not at the bottom unfortunately. IE6 has the same problem but there is a straightforward hack to deal with that browser so i'm not concerned.

    I tried implementing the mezzoblue min-height fix with no luck. What I discovered is that without the hack, in the troubled browsers if you change the #inner-wrap min-height simply to height: 100% those browsers treat the footer properly. However then the footer can be positioned over the content which I have been unable to figure out. The other thing I discovered is that by removing the min and max widths from #container-page and leaving the min-height on #inner-wrap as is, everything is fine.

    I'll keep fiddling around with this. If anyone has any ideas what I could do that would be great. I'd prefer a non javascript solution and a solution within the context of the code that's here. I already have all the links to existing sticky footer examples.

    Thanks for your help.

    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">
    	
    	<head>
    
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<style type="text/css">		
    		* { margin: 0; padding: 0; }
    		
    		html, body, #container-page {
    			height: 100%;
    			margin: 0; padding: 0 2em;
    		}
    
    		body { background: black; }
    
    		#container-page {
    			margin: 0 auto; padding: 0;
    			min-width: 40em;
    			max-width: 60em;
    		}
    		
    		/* Safari, IE, Opera, and OmniWeb dislike min-height: 100% */
    		#inner-wrap { 
    			position: relative;
    			min-height: 100%;
    			margin: 0;
    			background-color: #F7F4ED;
    		}
    		
    		
    		/*IE 6 and Safari Hack*/
    		/*read by Mozilla 1.0-1.4,IE6,Safari*/
    		html*.#inner-wrap{
    			[height:100%;/*necessary to hide from Mozilla*/
    			height:100%;/*read by Safari*/
    			]height:100%;/*only read by IE6*/
    		}
    		.dummyend[id]{clear: both;
    		/*end hack using dummy attribute selector for IE5 mac*/}
    		
    		
    		#footer {
    			width: 100%;
    			position: relative; 
    			border-top: 10px solid #E0DFDD; 
    			background: #A6A5A3;
    			margin-top: -185px; /* 175px height + 10px top-border*/
    			height: 175px;
    		}
    		
    		#primary-content  {
    			padding: 0 1em; 
    			padding-bottom: 185px; /* must match #footer margin-top */
    		}
    		
    		</style>
    		
    		
    		
    	</head>
    
    	<body>
    		<div id="container-page">
    
    			<div id="inner-wrap">	
    				<div id="primary-content">
    					<p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
    					<p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
    
    				</div>
    			</div>
    						
    			<div id="footer">
    				<p>footer text here</p>
    			</div>
    			
    		</div>
    	</body>
    </html>
    Last edited by wyclef; 12-21-2006 at 04:10 PM.

Bookmarks

Posting Permissions

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