Center footer fixed at the bottom IE
I am coding a web interface for a University project and I have been dealing with this issue:
I want my footer fixed at the bottom so it is in place no matter which screen I am using or if I toggle the full screen mode
It works in all the other browsers except IE7 (I do not have to support previous versions)
HTML
<div id="menu">
<a href="information.html" rel="shadowbox;height=500;width=650" title="INFORMATION" >
<img src="images/info.png" alt="information icon" />
</a>
<a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES" >
<img src="images/image.png" alt="image icon" />
</a>
<a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" >
<img src="images/music.png" alt="music icon" />
</a>
<a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon" /></a>
<a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" >
<img src="images/male_user.png" alt="male user icon" />
</a>
<a href="#" title="REFERENCES">
<img src="images/search_globe.png" alt="search globe icon" />
</a>
</div>
<a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
<div class="clear"></div>
<div id="destiny">
Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above!
(F11 Toggle Full / Standard screen)
</div>
<div id="footer">
<ul id="breadcrumbs">
<li>Disclaimer</li>
<li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
<li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a&g开发者_运维百科t;</li>
<li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
</ul>
</div>
</div>
CSS:
#wrapper{
text-align:center;
margin:0 auto;
width:750px;
height:430px;
border:1px solid #fff;
}
#menu{
position:relative;
margin:0 auto;
top:350px;
width:450px;
height:60px;
}
#destiny{
position:relative;
top:380px;
color:#FFF;
font-size:1.5em;
font-weight:bold;
border:1px solid #fff;
}
#breadcrumbs{
list-style:none;
}
#breadcrumbs li{
display:inline;
color:#FFF;
}
#footer{
position:absolute;
width:750px;
height:60px;
margin:0 auto;
text-align:center;
border:1px solid #fff;
bottom:0;
}
.clear{
clear:both;
}
The white borders are there only for debugging purposes
The application is hosted at http://www.eezzyweb.com/destiny/
Any suggestion is appreciated
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
height: 150px; /* #push must be the same height as #footer */
}
HTML:
<body>
<div id="wrapper">
<!-- ALL non-footer content goes in this DIV. -->
<div id="push"></div>
</div>
<div id="footer">
<ul id="breadcrumbs">
<li>Disclaimer</li>
<li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
<li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
<li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
</ul>
</div>
</body>
Code adapted from http://ryanfait.com/sticky-footer/
I've used this approach on several sites I've developed, including my personal site. It works great! And even in IE6 (even though you said it doesn't need to).
margin: auto; is what's broken in IE7.
You can go around it with
#footer {
width: 100%;
left: 0px;
}
, since that way the div stretches to full width and the ul will auto-align to the middle.
But maybe that's not what you want.
If it's not an acceptable solution, people on the web say you can fix it with aligning the parent's text to the center - but that might screw the remainder of the layout... you'll have to play around with it, but at least you know what's going bad.
html,
body {
height: 100%;
}
#wrapper {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer{
left: 0;
}
加载中,请稍侯......
精彩评论