tags:

views:

211

answers:

1
+1  Q: 

Sticky footer work but not on my template?

ok, my problem is Sticky footer code work, I've tested it:

No image just copy and paste it will work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sticky Footer</title>
<style type="text/css">

* {margin:0 auto;
padding:0px;}

html, body {height: 100%;}

.wrapper {min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -250px;}

.footer, .push {height: 250px;}

.footer {background:#CCC;
width:100%;}

.conver {width:960px;
height:200px;}

.extra1 {float:left;
width:320px;
height:170px;
background:#0F0}

.extra2 {float:left;
width:320px;
height:170px;
background:#00F}

.extra3 {float:right;
width:320px;
height:170px;
background:#F00}

.clear {clear:both;}

.footer_note p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
text-align:right;
padding-top:20px;}

</style>
</head>
<body>

<div class="wrapper"><!-- Wrapper goes around all the content -->
<p>Your website content here.</p><!-- All your content goes here -->
<div class="push"></div><!-- Push the footer to the bottom -->
</div><!-- Wrapper ends here -->

<div class="footer"><!-- Wrap the footer -->

  <div class="conver"><!-- Contain footer elements -->
    <div class="extra1"></div>
    <div class="extra2"></div>
    <div class="extra3"></div>
    <div class="clear"></div>
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div>
  </div><!-- conver Ends here -->


</div><!-- Footer ends here -->

</body>
</html>

so here it is on my template (looks weird without the images): PS: there is no image but the template ends like 30px after the text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<!--[if IE 6]>
    <meta http-equiv="refresh" content="0; url=http://www.google.com.br"&gt;
<![endif]-->
<style type="text/css">
/* General */
* {margin:0px auto;
padding:0px;}

p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:18px;
text-align:left;
color:#000;}

.breadcrumbs_here {width:940px;}

/* background */
html {background:#039 url(../images/bg_repeat_x.png) repeat-x;
height:100%;}

body {background:url(../images/Glare_01.jpg) no-repeat top center;
height:100%;}

html > body {min-height:100%;
height:auto;}
/* background ends here */

/* header */
a#header {background:url(../images/header-trans.png) no-repeat;
display:block;
height:130px;
width:630px;
text-indent:-9999px;
margin-right:500px;}
/* header ends here */

/* sheet starts here */
.sheet {position:relative;
width:1000px;
top:10px;}

.top_sheet {width:1000px;
height:20px;}

.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}

.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}

.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}

.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;}

bottom_sheet {width:1000px;
height:30px;}

.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}

.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}

.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}
/* sheets end here */

/* Top menu and search */
.top_menu {position:relative;
width:960px;
height:51px;}

.top_menu_inside {float:left;
width:720px;
height:51px;
background:url(../images/menu_bg.png) repeat-x;}

.search_background {float:right;
width:240px;
height:51px;
background:url(../images/search_bg.png) repeat-x;}
/* Top menu and search ends here*/

/* highlights */
.highlights {position:relative;
width:960px;
height:150px;
background:url(../images/highlight_bg-trans.png) repeat-x;}

.hl1{float:left;
height:150px;
width:320px;}

.hl2{float:left;
height:150px;
width:320px;}

.hl3{float:right;
height:150px;
width:320px;}
/* highlights ends here */

/* content */
.content {position:relative;
width:1000px;
background:url(../images/content_middle.png) repeat-y;}

.content_wrapper {position:relative;
width:960px;}

.left {float:left;
height:100%;
width:25%}

.left p {padding-left:10px;}

.right {float:right;
height:100%;
width:75%}

.right p {padding-left:10px;
padding-right:10px;}

.clear {clear:both;
clear:both;
height:0;
font-size: 1px;
line-height: 0px;}
/* content ends here */

/* footer */

.wrapper {min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -250px;}

.footer, .push {height: 250px;}

.footer {background:#CCC;
width:100%;}

.conver {width:960px;
height:200px;}

.extra1 {float:left;
width:320px;
height:170px;
background:#0F0}

.extra2 {float:left;
width:320px;
height:170px;
background:#00F}

.extra3 {float:right;
width:320px;
height:170px;
background:#F00}

.clear {clear:both;}

.footer_note p {font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#000;
text-align:right;
padding-top:20px;}

</style>

</head>
<body>

<a id="header" href="http://www.google.com.br" title="google" target="_self">google</a>
<div class="wrapper"><!-- Wrapper goes around all the content -->
<div class="sheet">

  <div class="top_sheet">
    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
  </div>

    <div class="middle">

      <div class="top_menu">
            <div class="top_menu_inside"></div>
            <div class="search_background"></div>
            <div class="clear"></div>
      </div>

              <div class="highlights">
                <div class="hl1"></div>
                <div class="hl2"></div>
                <div class="hl3"></div>
                <div class="clear"></div>
              </div><!-- highlights ends here -->

      <div class="content">

        <div class="breadcrumbs_here"></div>
            <div class="content_wrapper">
            <div class="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante ligula, faucibus ut aliquam ut</p></div>
            <div class="right"></div>

            <div class="clear"></div><!-- keeps the floats in one piece -->

      </div><!-- content wrapper ends here -->

      </div><!-- content ends here -->

    </div><!-- middle ends here -->

  <div class="bottom_sheet">
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>
    <div class="clear"></div>
  </div>

</div><!-- End of the sheet class -->

<div class="push"></div><!-- Push the footer to the bottom -->

</div><!-- Wrapper ends here -->

<div class="footer"><!-- Wrap the footer -->

  <div class="conver"><!-- Contain footer elements -->
    <div class="extra1"></div>
    <div class="extra2"></div>
    <div class="extra3"></div>
    <div class="clear"></div>
    <div class="footer_note"><p>Copyright should be here<br/>Company name</p></div>
  </div><!-- conver Ends here -->


</div><!-- Footer ends here -->
</body>
</html>

I'm being sincere here, I don't fully understand how the "sticky footer" works maybe if I knew I would be able to solve this.

The "sticky footer" is sticking to end of the template! I could use absolute postion to make it work bu IE7 hates that...

This template is not supposed to work on IE6, so don't even worry about that garbage...

+1  A: 

In the second example, your CSS entry of:

* {margin:0px auto;
padding:0px;}

Is causing your large space at the bottom of the page. Is that what you are seeing that is causing it not to work for you? If you are using Firefox you can get the Firebug plugin ( http://getfirebug.com/ ) which allows you to view and alter the CSS of elements in realtime. Very helpful debugging tool.

Dougman  2009-12-18 15:33:52

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?