[RESOLVED] Div in FF works , but not in IE 6 or 7

[Phill Pafford]

Hi,

Need some help again :-)

I have a tooltip that on hover shows some info. In FF works great, but in IE 6 & 7 the tooltip goes under other elements and does how correctly.

Here is the CSS


a.tooltip
{
color:#174891;
text-decoration:none;
}
a.tooltip:hover
{
text-decoration:underline;
position:relative;
}

a.tooltip span
{
display:none;
}

a.tooltip:hover span
{
position:absolute;
z-index:1;
top:35px;
left:0px;
width:150px;
display:block;
padding:10px;
background-color:#FFFFCC;
border:2px solid #C0C097;
text-align:left;
}

.tooltip b
{
position:absolute;
width:26px;
height:15px;
top:-15px;
left:20px;
background-image:url(../images/tooltiparrow.gif);
font-size:1px;
}

.tooltip strong
{
color:#333333;
font:100% arial,helvetica,clean,sans-serif;
font-size:15px;
font-weight:bold;
}



Here is the HTML



<a class='tooltip' href='http://localhost/sandbox/testLinks.php'>LINK TITLE
<span><b></b><strong>LINK SUB-TITLE</strong><br /><br />LINK DESCRIPTION, MORE DESCRIPTION</span>
</a>



I have also attached some pics, the under pic is not what I want. The over pic is.

Thanks is advance

--Phill

[KDLA]

I would attribute it to the usage of negative margins, which IE is not fond of. You might take a look at this technique, which seems a bit easier to work with:

http://psacake.com/web/jl.asp

KDLA

[Centauri]

There is no negative margins there....

Have you tried a higher z-index (like 100 or more) ?

[KDLA]

There is no negative margins there....

.tooltip b
{
position:absolute;
width:26px;
height:15px;
top:-15px;
left:20px;
background-image:url(../images/tooltiparrow.gif);
font-size:1px;
}

;)

[Centauri]

That's a top positioning, not a margin. It defines the top of the absolutely positioned element should be 15px higher than the referenced parent. I am not aware of any problems IE has with this.

[KDLA]

I'm aware it is absolute positioning. "top" is simply an indicator of where to put the top margin of the box. Perhaps my syntax was a bit vague. Nonetheless, I do believe that the problem stems from the negative margin (placing the tooltip under the previous line) and/or the z-index, as you've mentioned. If increasing the z-index doesn't work, adjusting the top positioning to a positive integer should eradicate the problem.

[Phill Pafford]

Thanks Guys & Gals,

It was the z-index, but I added the z-index to the parent element to get it to work.


Yeah