KILLHILL: Text mittels a:hover einblenden geht nicht richtig im IE

SELF-Forum

Text mittels a:hover einblenden geht nicht richtig im IE

KILLHILL
– Informationen zu den Bewertungsregeln

Hallo

Folgende Situation: ich habe in einer kleinen Box ein Druckersymbol was mittels JS den Druckdialog öffnet. Wenn das Symbol mit der Maus überfahren wird wird bzw. soll ein kleiner Text eingeledet werden ("Diese Seite drucken"). Im Firefox (1.5) und Opera (8.5) klappt es genau so wie ich es will (Text links neben dem Symbol). Im IE6 wird der Text überhaupt nicht gezeigt.

Wäre nett wenn mir da einer helfen könnte.

Grüße
KILLHILL

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

CSS
........................
#print
{
position:relative; top:24px; right:0px;
float:right;
}

#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;
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;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text mittels a:hover einblenden geht nicht richtig im IE

    Axel Richter
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text mittels a:hover einblenden geht nicht richtig im IE

      KILLHILL
      – Informationen zu den Bewertungsregeln

      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

      Super, danke. Hab mir schon so was in der Art gedacht, also, dass es wo nicht so ganz rein passt. Wusste halt nur nicht wo genau. Hatte zwar was rumprobiert, aber nix gefunden.

      Grüße
      KILLHILL

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln