#leftbutton {
text-align: center;
width: 10em;
padding: 0;
font-family: Arial, sans-serif;
}
#leftbutton ul {
list-style: none;
margin: 0;
padding:0;
border: none;
}
#leftbutton li {
margin: 0;
padding: 0 0 5px 0;}
#leftbutton li a {
margin-left: auto;
margin-right: auto;
display: block;
padding: 5px 5px 5px 5px;
text-decoration: none;
width: 80%;
background-color: #f0fff0;
color: #808080;
border-style: solid;
border-width: 1px;
border-color: #808080;
}
#leftbutton li a:hover {
background-color: #98FB98;
color: #808080;
}
#rightbutton{
text-align: center;
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
#rightbutton ul {
list-style: none;
margin: 0;
padding:0;
border: none;
}
#rightbutton li {
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
display: block;
padding: 5px 5px 5px 5px;
width: 80%;
background-color: #dcdcdc;
color: #dcdcdc;
border-style: solid;
border-width: 1px;
border-color: #808080;
}
#rightbutton li a {
text-decoration: none;
color: #dcdcdc;
}
#rightbutton li a:hover {
padding: 5 5 5 5;
background-color: #ffdab9;
color: #808080;
}
leftbutton is the way of creating mouse over buttons that everyone seems to use. It works great. Right button is the way I'd like to set it up. This way, can use <a> as a a 'class' of it's own. The goal is to have buttons not being used greyed out, like the disabled attribute.
Obviously, leftbutton works. rightbutton works exactly the same, with one small exception: the hover background color doesn't go all the way to the left and right of the button. It fills to the top and bottom just fine, but not left and right.
I've tried adjusting the padding and margins, but to no avail. I've tried adjusting the width arguement, but that doesn't seem to work either.
Any ideas?
Jeremy
Jun 8th, 2004, 12:02 PM
Threaded Mode