CSS Footer bar bottom center issue
Posted
by StealthRT
on Stack Overflow
See other posts from Stack Overflow
or by StealthRT
Published on 2010-04-26T20:49:41Z
Indexed on
2010/04/26
20:53 UTC
Read the original article
Hit count: 492
Hey all, i am trying to get my bottom bar to center on the screen but i am unable to do so.
<style type="text/css">
body {
background: #fffff;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
#bottomBar {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 500px;
min-width: 500px;
margin: 0px auto;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
*html #bottomBar {margin-top: -1px; position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}
#bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;}
#bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;}
#bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;}
html #bottomBar ul li a:hover{ background-color: #fff; }
a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; }
</style>
<div id="bottomBar">
<ul id="mainpanel">
<li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li>
<li><a href="http://www.xxx.com" class="PDF">Download PDF <small>Download PDF</small></a></li>
</ul>
</div>
Thanks!
David
© Stack Overflow or respective owner