My sticky footer works great in all the browsers expect Safari & Chrome, particularly the work.html page itself.
http://obliqueinteractive.com/creative/work.html
I noticed when i delete this css attribute from my style sheet, the problem goes away but doesn't allow for the footer to stick anymore
html, body {height: 100%;}
Could there be other css issues that are forcing the footer to act this way?
First, hard to diagnose without seeing your code. Yes there are definitely other css issues that can affect a sticky footer; namely padding on other elements. Again, hard to diagnose when we can't see your code.
This stickey footer is great and I used it a lot.
code for the sticky footer and divs with padding:
body{
background-image: url(../images/main_bg.jpg);
background-repeat: repeat-x;
}
#wrapper{
width: 961px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -104px;
}
.footer, .push {
height: 104px;
}
#work_colm{
width: 675px;
float: left;
display: inline;
padding-bottom: 40px;
}
#footer {
margin: 0 auto;
background: #292929 repeat-x;
height: 104px;
clear: both;
}
I am using this method and I having the same problem in Safari. There seems to be a bottom-padding on the footer element that I can't get rid of. Any suggestions would be a great help.
I made the following changes (to the floating footer element) and it works now in safari, opera, firefox, and chrome.
width: 101%;
margin-left: -8px;
I'm not sure if the 8px was just a fix for me or a fix for all but give it a shot and let me know