It looks fine in IE. But went wrong in Firefox.
Also there seems to be a space to the right of each img button. :cry:
IE
http://imgboost.com/uploads/894333_screenshot2.jpg
FF
http://imgboost.com/uploads/113426_screenshot1.jpg
My Css
* {
margin: 0;
padding: 0;
}
html{
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0;
padding: 0;
}
* html #container {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
#topLinks
{
list-style: none;
}
#topLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
}
#topLinks li.topLinks_first
{
border-left: 1px solid #FFFFFF;
}
#topLinks li.topLinks_last
{
border-right: 1px solid #FFFFFF;
}
#topLinks a
{
color: #FFFFFF;
}
#header {
padding: 5px;
margin: 5px;
}
#footer {
width: 100%;
text-align:center;
position: absolute;
bottom: 0;
margin:0;
padding:0;
}
#footer_pink {
background: url('../images/footer_pink.gif') repeat-x;
height: 35px;
}
#bottomLinks
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
list-style: none;
margin-top: 0;
margin-left: 0;
padding-top: 0.9em;
background-image: url(../images/footer_bg.gif);
background-repeat: no-repeat;
}
#bottomLinks li
{
display: inline;
border-left: 1px solid #FFFFFF;
padding-right: 1em;
padding-left: 1em;
}
#bottomLinks li.first
{
border-left: 0 none transparent;
}
#bottomLinks a
{
color: #FFFFFF;
}
#footer_yellow {
background: url('../images/footer_yellow.gif') repeat-x;
height: 55px;
}
.footer_yellow {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#333333;
}
#footer_content {
padding-top:1.0em;
}
#footer_yellow img {
border: none;
}
#menu {
background: url('../images/pink_menu.gif') repeat-x;
height: 37px;
text-align:center;
}
#menu a img {
border: none;
}
#menu ul {
padding:0px;
margin:0px auto;
}
#menu ul li{
display:inline;
list-style-type:none;
}