Stick Footer Issue in Safari & Chrome
My sticky footer works great in all the browsers expect Saf开发者_如何学运维ari & 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 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
精彩评论