Jump to content

how to make footer to stay at bottom of the page

newUser

By newUser
in CSS

 Share

Recommended Posts

newUser Newbie

newUser

Posted
Posted

HELP!!! :) this browsers !#@$!#$!^%! especially IEHow to make footer to stay at bootom of page no matter how long is content at page.I have some code for footer it goes like this

#footer{position: absolute;bottom:10px;left:15%;vertical-align:bottom;width: 700px;border-top:1px solid black;}

and it works in Opera 8.5, for IE I don't know because he died suddenly:o), and in FF it won't work.In FF footer stays at some height at the page no matter how long content is.

Link to comment
Share on other sites
raimo Member

raimo

Posted
Posted
and it works in Opera 8.5
So here we can see it again! Opera is the best! :)(Opera IS the best, no doubt, and getting better every day)try to change position absolute to position relative, I think it will help You.
Link to comment
Share on other sites
newUser Newbie

newUser

Posted
  • Author
Posted
So here we can see it again! Opera is the best!  :)(Opera IS the best, no doubt, and getting better every day)try to change position absolute to position relative, I think it will help You.

No. That doesn't work. Here is css:
body{	margin: 0px;	padding: 0px 0 2em 0;	background: #efefef;}#main_content{	position:relative;	font: 10px verdana, arial, sans-serif;	color:#444444;	min-width:539px;	margin: 140px 154px 10px 318px;	padding:0 0em 0 0;	z-index:1;}html>body #main_content {	margin:140px 250px 10px 320px;	min-width:532px;	width:auto;}#main_content li {	color:#111;	text-align:justify;}#main_content p {	color:#000000;	margin: 5px;	font:13px verdana, arial;	text-align:justify;}#main_content h3 {	color:#000000;	min-width:539px;	width:auto;	font:bold 15px arial, sans-serif;	background: gray;	text-align:left;	text-indent:10px;	text-transform:uppercase;	margin:0;}html>body #main_content h3 {	min-width:532px;	width:auto;}#main_content a{	display:block;	margin:2px;	color:blue;	text-decoration:underline;}#main_content a:hover {	color:blue;	text-decoration:none;}/**************** menu code - found somewhere on the web*****************/#menu {	position:absolute;	left:15%;	border:1px solid #990000;	width: 160px;	background: #fff;	margin: 0px 0 5em 0;	padding:0;	top:140px;}html>body #menu {	margin:0px 0 5em 0;}#menu ul {	list-style: none;	margin: 0;	padding: 0;}#menu a, #menu h2 {	display: block;	margin: 2px;}#menu h2 {	font: bold 14px arial, helvetica, sans-serif;	color: #FFF;	background: #990000;	text-align:right;	padding:3px 10px 2px 0px;}#menu a {	font: bold 10px verdana, arial, helvetica, sans-serif;	color: #990000;	border-bottom: 1px solid #990000;	background: transparent;	text-decoration: none;	padding:2px 0px 3px 10px;}#menu a:hover {	color: #fff;	background: #990000;}#menu li {	position:relative;	background:transparent;}#menu ul ul ul {	position: absolute;	top: 0;	left: 100%;	width: 100%;	background:#fff;}div#menu ul ul ul,div#menu ul ul li:hover ul ul{	display: none;	background:#fff;}div#menu ul ul li:hover ul,div#menu ul ul ul li:hover ul{	display: block;	background:#fff;	border:1px solid #990000;}/*******************	end menu code	********************/#baner{	position: relative;	width: 700px;	height: 100px;	color: #cccccc;	padding: 0px;	margin: 10px 0 10px 0;	background:#fefefe;}#banercontain{	position: absolute;	top: 0px;	left: 15%;	right: 0%;	width:700px;	border:1px solid #111;	background:#990000;	margin-bottom:50px;	z-index:1;}#footer{position: absolute;bottom:10px;left:15%;vertical-align:bottom;width: 700px;border-top:1px solid black;}

and here is HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>	<!-- found this somewhere on the web :o) -->		<!--[if IE]> 	 <style type='text/css' media='screen'> 	 body { 	 behavior: url(csshover.htc); 	 font-size: 100%; 	 }  	 #levi_menu ul li {float: left; width: 100%;} 	 #levi_menu ul li a {height: 1%;} 	 #desni_menu ul li {float: right; width: 100%;} 	 #desni_menu ul li a {height: 1%;}  	  	 #levi_menu a { 	 font: bold 0.6em verdana, arial, helvetica, sans-serif; 	 } 	 #desni_menu a { 	 font: bold 0.6em verdana, arial, helvetica, sans-serif; 	 }  	  	 #levi_menu h2 { 	 font: bold 0.9em arial, helvetica, sans-serif; 	 } 	 #desni_menu h2 { 	 font: bold 0.9em arial, helvetica, sans-serif; 	 }  	  	 </style>	<![endif]--><title>TESTING</title><style type="text/css" media="screen">@import "css.css";</style></head><body>	<!-  BANNER and other elements	-->  <div id='banercontain'>        <div id='baner'>        <h1 style='font:bold 38px verdana;margin-left:340px;margin-top:10px;color:#111;'>SOME TEXT</h1>      </div>  </div>	<!-  BANNER END 	 -->	<!-  MENU LEFT 	 --> <div>    <div id='menu'>      <ul>	<li>   <h2>:::Headline</h2>     <ul>       <li><a href='#'>Link</a>       <li><a href='#'>Link</a>       <li><a href='#'>Link</a>              </li>            </ul>        </li>      </ul>    </div> </div><!-	END MENU	--><!-  MAIN TEXT  --><div id='main_content'>  <h3>SOME HEADLINE</h3>  <p>     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.    Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis    nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.    Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.    Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a    mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad    litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.    Mauris magna eros, semper a, tempor et, rutrum et, tortor.    </p> <p>     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.    Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis    nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero.    Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo.    Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a    mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad    litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus.    Mauris magna eros, semper a, tempor et, rutrum et, tortor.    </p> </div><!-	END MAIN TEXT	--><!-	AND FINALLY HIS HIGHNESS FOOTER	:o)	--><div id='footer'>   © 2006 | Home</div></body></html>

try it in Opera with longer and shorter text and watch how footer behaves, and than try same thing with FF and IE and watch footer.I want footer to behave like in opera:o) Is it possible?

Link to comment
Share on other sites
mpoer Member

mpoer

Posted
Posted 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

maybe this should be something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or maybe you can upgrade to XHTML Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

that could affect the way a browser renders things. I don't think HTML 4.0 used CSS like this

Link to comment
Share on other sites
newUser Newbie

newUser

Posted
  • Author
Posted 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

maybe this should be something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or maybe you can upgrade to XHTML Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

that could affect the way a browser renders things. I don't think HTML 4.0 used CSS like this

Nothing. Any other idea?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...