CSS tooltip isn't working in IE6

[xkratosx]

Hi,

I've created a little set of icons in the top left of my site, and where you rollover them, a tooltip is displayed accordingly:



Problem is, in IE6 it doesn't display the tooltip at all, here's the HTML code:

<div id="notice">
	<ul class="plain">
		<li class="paperclip"><a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>You have <strong>2</strong> new notes</span></a>
		</li>
		<li class="smallhouse">
			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>You have <strong>3</strong> houses</span></a>
		</li>
		<li class="calendar">
			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>You have <strong>1</strong> calendar events</span></a>
		</li>
		<li class="newmail">
			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>You have <strong>2</strong> new messages</span></a>
		</li>
		<li class="quote">
			<a href="/hrtest/richg/testdesign/workforceonline/index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>You have <strong>5</strong> new notices</span></a>
		</li>
	</ul>
</div>

And here's the CSS:

#notice { /* this code allows the notice to float, see notices.php for rest of code */
	width: 30px;
	background: #fff; border-left: 1px solid #777799; border-right: 1px solid #777799; border-bottom: 1px solid #777799;
	position: absolute; right: 10px; top: 0px;
}
#notice a span {
display: none;
}
#notice a:hover span {
display: block;
position: absolute; width: 170px; height: 18px;
margin-left: -172px; margin-top: -19px; background: #fff; border: 1px solid #777799;
color: #777799;
}
.plain li { background-repeat: no-repeat; list-style: none; background-position: center;}

And the class around the lists literally just defines an image background.

I'm afraid I can't upload a working example Sorry to be a pain, but I'm really at a loss with this, it displays fine in Firefox but not in IE6 at all :/

Thanks

[Paul O'B]

HI,

This is a long standing, well known bug in IE and can simply be fixed like this:

#notice a:hover{visibility:visible}

IE won't action changes on inner elements in the anchor unless a property is actioned for the anchors hover. visibility:visible is the perfect fix as it doesn't affect the look of the layout at all as the default is visible anyway.

[xkratosx]

Wow! That's awesome, thank you so much for that, I'd of never of thought of that myself so really appreciate it.

Just a shame now that the IE positioning is completely out to Firefox! Will have a play around

[Paul O'B]

Just a shame now that the IE positioning is completely out to Firefox!

For the absolute span rather than using margin-left use left instead. IE will base its natural position on other factors (such as text-alignment) and will often differ from other browsers.

[xkratosx]

Ah awesome, thank you so much! Certainly a big improvement after removing the margins, although it's still a bit out in Firefox now (slightly too far to the left, and a bit too low) but I think it's unsupported here anyway, so it should be okay, even though it's not quite right (it's still perfectly readable and useable which is the main thing I guess!)

Thanks again

[junjun]

Is it "your site" or an intranet site? Just curious, the image looked like the latter.

[xkratosx]

Sorry yeah, it's an intranet I'm making with a friend