Jump to content

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


brysonprice

Recommended Posts

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...