Question

I have a HTML page where I have to display a popup (like tool tip) on mouse over of an image. The below code is working fine in IE8 and Firefox, i have issue with IE6, the hover popup is not shown.

    STYLE:
    /* css style */
    .ToolTip { position: relative; cursor: default; text-decoration: none; border: none;}

    .ToolTip a span {display: none; text-decoration: none; color: #FFFFFF; }

    .ToolTip a:hover span { overflow:hidden; text-decoration: none; display: block;
     position: absolute; width: 250px; background-color: #046C08; border: none; height: 90px;
     left: 25px; top: -10px; color: #FFFFFF; padding: 5px; line-height: 18px; z-index: 1; }

    HTML:

/* html page content */

    <p class="ToolTip">
        <a href="#">
            <img src="...." alt="" style="border: 0px;" />
     <span>
                 CSS Popup..
     </span>
        </a>
    </p>

any idea please?
thanks in advance

Answer 1

As Happy Singh stated, most sites do not support IE6 compatibility anymore. However, how you could try to fix it:

You have many parameters in your stylesheet, did you use all of them on purpose or did you just try to add more and more to make it possibly work?

E.g. look at:

.ToolTip a span {display: none; text-decoration: none; color: #FFFFFF;
}

You do not need to declare the color and text-decoration here, as if you have already set display:none, the element should not be shown anyway. Btw, you declare the same color in the :hover state, so it would be double anyway too.

As the code you have posted is only a part of the whole code, I can also just guess, but some hints if we look at:

.ToolTip a:hover span { overflow:hidden; text-decoration: none; display: block;
position: absolute; width: 250px; background-color: #046C08; border: none; height: 90px;
left: 25px; top: -10px; color: #FFFFFF; padding: 5px; line-height: 18px; z-index: 1; }

Like said, there is no need for overflow:hidden. This would simply hide the text in your span element, if it was longer than the 250px width and/or 90px height. But it is of no matter to your question.

However, what you may not be so clever, because you do not declare any position to the span element when it is not hovered, but in state is hovered, you suddenly add position etc. What I mean is, if you just changed the visibility or display, the span element would not change the position.

So…

Display:block can be interpreted strangely sometimes. Position:absolute – here we go: have you positioned the span-element above the image? Or outside the page (probably not completely, it may be too large for that). If you have it positioned behind the image, you could try to change top, left and z-index. If you change the z-index, you should try to assign a z-index to the image as well or remove both z-index values. If you assign z-index, try to set a huge difference between the two values, or one positive and one negative.

All in all, try always to start with the minimum parameters necessary for each element. Then add what you really need. Try to set all parameters to the span element separately, and change only the display.