My buttons and webpage look great in EI but not in safari or firefox, they overlap and are not centered.
http://www.universalledlight.com/testing/index.php
#button1 a {
background:clear;
color:#333300;
display:block;
float:center;
width: 78px;
height:78px;
text-align:center;
text-decoration:none;
position:relative;
left:60px;
min-height: 78px;
display: table-cell;
vertical-align: middle;
line-height:1.3em;
clear:both;
}
#button1 a:hover {
display:block;
float:center;
width: 78px;
height:78px;
text-align:center;
color:#fff;
text-decoration:none;
position:relative;
left:60px;
min-height: 78px;
display: table-cell;
vertical-align: middle;
line-height:1.3em;
clear:both;
}
#button a {
background:clear;
color:#333300;
display:block;
float:center;
width: 78px;
height:78px;
text-align:center;
text-decoration:none;
position:relative;
left:60px;
min-height: 78px;
display: table-cell;
vertical-align: middle;
line-height:1.3em;
border-top:1px solid #333300; no-repeat;
clear:both;
}
#button a:hover {
display:block;
float:center;
width: 78px;
height:78px;
text-align:center;
color:#fff;
text-decoration:none;
position:relative;
left:60px;
min-height: 78px;
display: table-cell;
vertical-align: middle;
line-height:1.3em;
border-top:1px solid #333300; no-repeat;
clear:both;
}
#buttonactive a,
#buttonactive a:hover {
color:#fff;
background:#666666;
font-weight:bold;
font-size:11.5px;
font-family:verdana;
display:block;
float:center;
width: 78px;
height:78px;
text-align:center;
text-decoration:none;
position:relative;
left:60px;
min-height: 78px;
display: table-cell;
vertical-align: middle;
#greenbox {display:block;
font-family: verdana;
font-size:12px;
float:right;
clear:left;
width:204px;
height:50px;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#666633;
color:#fff;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
border-left:1px solid #666633; no-repeat;
border:2px solid #cccc99; no-repeat;
float:left;
}
line-height:1.3em;
border-top:1px solid #333300; no-repeat;
clear:both; }