开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜