Ссылка "подробнее" выглядит как исчезающий текст - Вопросы по CSS

<script type="text/javascript">
	$(document).ready(function(){
	  $(".moduletable h3").prepend("<span></span>");
	  $("td.contentheading").prepend("<span></span>");
	  $(".componentheading").prepend("<span></span>");
	});
</script>

h3 span {
	background: url(../js/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 200px;
	height: 31px;
}
.contentheading span, .componentheading span {
	background: url(../js/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 600px;
	height: 31px;
	border: 0px solid #000;
}

a.readon:link,a.readon:visited, a.readon:hover {
position: relative;
display: block;
width: 100%;
height: 40px;
color: #fff;
top: -62px;
background-image: url(../images/bg_readon.png);
background-position: right;
background-repeat: no-repeat;
z-index: 2;
bottom: 0px;
} 

MORE=Подробнее...

MORE=.