brysonprice Posted March 1, 2011 Report Share Posted March 1, 2011 (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 March 1, 2011 by brysonpice Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 1, 2011 Report Share Posted March 1, 2011 Is there a specific tutorial/article you are following? I usually use http://www.themaninblue.com/writing/perspective/2005/08/29/. It's a bit old now, but still works consistently. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 1, 2011 Report Share Posted March 1, 2011 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 Quote Link to comment Share on other sites More sharing options...
brysonprice Posted March 2, 2011 Author Report Share Posted March 2, 2011 thanks everyone, I'll check these out : ) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.