Axel Richter: Text mittels a:hover einblenden geht nicht richtig im IE

Beitrag lesen

Hallo,

Im IE6 wird der Text überhaupt nicht gezeigt.

HTML
........................
<div id="print"><a href="JavaScript:window.print()">&nbsp;<span>Diese Seite drucken</span></a></div>

CSS
........................
#print a:link, #print a:visited
{
text-decoration:none;
display:block;
width:16px;
height:14px;
background:url(../images/print.gif);
background-repeat:no-repeat;
}

#print a:hover
{
text-decoration:none;
background-color:#F6F6F6;
display:block;

overflow:visible;

background:url(../images/print_over.gif);
background-repeat:no-repeat;
}

#print span
{
display:none;
}

#print a:hover span
{
position:absolute;top:0px;right:22px;
width:95px;
display:block;
font-size:12px;
color:#666666;
background-color:#F6F6F6;
}

Es wird schon sichtbar, passt aber nicht in die für das A-Block-Element definierte Breite von 16px rein ;-). Ein overflow:visible bei #print a:hover hilft.

viele Grüße

Axel