Visit http://test.rmracers.ca/calendar you can see a calendar. If you move your mouse over an event, a yellow span will show up to give details of the event.

Problem: In Firefox the yellow span will cover the background, but in IE6/IE7, it will not cover. It looks like the span is transparent. The text in span and text in background messed up. How to modify CSS to make text in span cover text in background?

Now the CSS is:
span.calnk a span {
display:none;
}
span.calnk a:hover span {
color:#333333;
background:#F6F79B;
display:block;
position:absolute;
margin-top:1px;
padding:5px;
width:130px;
z-index:110;
}

Thank you.