Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

This footer will not stick to the bottom on all browsers : /

brysonprice

By brysonprice
in Beginners Web Design

 Share

Recommended Posts

brysonprice Newbie

brysonprice

Posted
Posted (edited)

I want my footer to stick to the bottom of the page on all resolutions and there is no scrolling, like this one:

N.E.R.D

 

It looks good in Firefox, but not all other browsers, and you can really see a difference when you look on a big screen mac. Here's a screen shot I took when viewing a large screen MAC:

big screen MAC

 

Does anyone know what my problem could be?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bryson Price Music</title>
<style type="text/css">
#wrapper {
text-align: left;
width: 960px;
position: relative;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}
.cartoon {
text-align: center;
margin: 0px;
padding: 0px;
height: 511px;
}
.footer {
height: 200px;
}
body {
background-repeat: repeat;
text-align: center;
margin: 0px;
padding: 0px;
}

#footer	{
background-position:center;
background-repeat:no-repeat
width:100%;
border-top-width: 3px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #282828;
border-right-color: #282828;
border-bottom-color: #282828;
border-left-color: #282828;
background-color: #e9e6e6;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 200px;
}
.wrapmenu {
text-align: center;
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('img/youtube.png','img/name.png','img/rollbrysongrey.png','img/rollblueone.png','img/rollbluetwo.png')">


<div id="wrapper">
 <div class="cartoon" id="cartoon">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="375" height="511" id="FlashID" accesskey="s">
         <param name="movie" value="img/toonelec.swf" />
         <param name="quality" value="high" />
         <param name="wmode" value="opaque" />
         <param name="swfversion" value="6.0.65.0" />
         <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
         <param name="expressinstall" value="Scripts/expressInstall.swf" />
         <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
         <!--[if !IE]>-->
<object 
type="application/x-shockwave-flash" 
   data="img/toonelec.swf" 
   width="375" height="500">
           <!--<![endif]-->
   <param name="quality" value="high" />
   <param name="wmode" value="opaque" />
   <param name="swfversion" value="6.0.65.0" />

           <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
           <div>
             <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
             <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
           </div>
           <!--[if !IE]>-->
         </object>
         <!--<![endif]-->
</object>
        </div>
 </div>


<div class="footer" id="footer"><img src="img/menustarone.png" alt="starone" width="47" height="118" id="Image1" onmouseover="MM_swapImage('Image1','','img/rollblueone.png',1)" onmouseout="MM_swapImgRestore()" /><img src="img/menubryson.png" alt="brysonmenu" width="500" height="118" id="Image3" onmouseover="MM_swapImage('Image3','','img/rollbrysongrey.png',1)" onmouseout="MM_swapImgRestore()" /><img src="img/menustartwo.png" alt="startwo" width="48" height="118" id="Image2" onmouseover="MM_swapImage('Image2','','img/rollbluetwo.png',1)" onmouseout="MM_swapImgRestore()" />
 <div class="wrapmenu">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="146" height="32" vspace="5" id="FlashID2" accesskey="s" tabindex="1">
   <param name="movie" value="img/homebio.swf" />
   <param name="quality" value="high" />
   <param name="wmode" value="opaque" />
   <param name="swfversion" value="6.0.65.0" />
   <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
   <param name="expressinstall" value="Scripts/expressInstall.swf" />
   <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
   <!--[if !IE]>-->
   <object data="img/homebio.swf" type="application/x-shockwave-flash" width="146" height="32" vspace="5">
     <!--<![endif]-->
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="6.0.65.0" />
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
     <div>
       <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
       <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
     </div>
     <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
 </object><img src="img/line.png" alt="line2" width="18" height="41" />
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="82" height="32" vspace="5" id="FlashID3" accesskey="s" tabindex="1">
   <param name="movie" value="img/homemusic.swf" />
   <param name="quality" value="high" />
   <param name="wmode" value="opaque" />
   <param name="swfversion" value="6.0.65.0" />
   <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
   <param name="expressinstall" value="Scripts/expressInstall.swf" />
   <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
   <!--[if !IE]>-->
   <object data="img/homemusic.swf" type="application/x-shockwave-flash" width="82" height="32" vspace="5">
     <!--<![endif]-->
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="6.0.65.0" />
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
     <div>
       <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
       <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
     </div>
     <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
 </object>
 <img src="img/line.png" width="18" height="41" alt="line" /><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="121" height="32" vspace="5" id="FlashID4" accesskey="s" tabindex="1">
   <param name="movie" value="img/homecontact.swf" />
   <param name="quality" value="high" />
   <param name="wmode" value="opaque" />
   <param name="swfversion" value="6.0.65.0" />
   <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
   <param name="expressinstall" value="Scripts/expressInstall.swf" />
   <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
   <!--[if !IE]>-->
   <object data="img/homecontact.swf" type="application/x-shockwave-flash" width="121" height="32" vspace="5">
     <!--<![endif]-->
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="6.0.65.0" />
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
           <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
 </object></div>

</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
swfobject.registerObject("FlashID4");
</script>
</body>
</html>

Edited by brysonpice
PicnicTutorials Newbie

PicnicTutorials

Posted
Posted

here is my code...

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer!</title>
<style type="text/css">
* {
margin:0;
padding:0; 
}
html, body {
height:100%; 
background:#999;
}
#wrap {
min-height:100%; 
width:1000px; 
margin:0 auto;
background:#ddd;
border:solid;
border-width:0 1px;
}
html:before, #wrap:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:left;
height:100%;
margin-top:-999em;
}
* html #wrap { /* IE6 workaround */
height:100%; 
}
h1 {
text-align:center;
padding:100px 0 200px; /* padding-bottom equals height of #foot */
}
#foot {
height:200px;
width:1000px;
margin:-200px auto 0; /* negative margin-top equals height of #foot */
background:url(images/sticky-foot.jpg);
}
</style> 
</head>
<body>

<div id="wrap">
<h1>STICKY FOOT!<br>
How To/Bug Fixes: <a href="http://www.search-this.com/2009/10/09/css-a-sticky-subject/">Here</a>, <a href="http://www.sitepoint.com/forums/showthread.php?t=611825">Here</a>, & <a href="http://www.sitepoint.com/forums/showthread.php?t=637323">Here</a></h1>

</div>
<div id="foot"></div>

</body>
</html>

 

http://www.visibilityinherit.com/code/sticky-footer-demo.php

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...