CSS Rollover Button has wrong color in IE., appears as white block

Three Rollover buttons has 2 issues on this page:
http://www.mwrgermany.com/index_buttons2.htm

1. Rollover text turns gray on IE.

2. When page is loading, buttons appear as big white blocks when moused over. They should always appear as buttons.

Any helpful suggestions would be appreciated!

Here is the CSS from the stylesheet:
.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/community_button_over.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 140px;
height: 28px;
margin: 0;
padding: 0;
}

.cssnav a
{
display: block;
color: #000000;
font-size: 13px;
width: 140px;
height: 28px;
display: block;
float: left;
color: white;
font-weight: bold;
text-decoration: none;

}

.cssnav img
{
width: 140px;
height: 28px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 7px;
top: 5px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 128px;
height: 18px;
}

 

Just set color:white in .cssnav a:hover will probably do the trick.