IE6 CSS tooltip not appearing

Question

I'm using a tooltip that works in FF, Chrome, and IE7-8, but in IE6 it doesn't appear. You can go to this page http://www.avaline.com/ Bags/ Eco-Friendly-Bags/R1500 and login with [email protected] password:test02, then hit the "add to cart" button and hover over the question marks to see (or not see) the tooltips.

This is the relevant HTML and CSS:

<DIV class="oewBox" id="oewImpLocDiv" style="BACKGROUND-IMAGE: url(/images/img/org4.gif)">
<A class="tooltip" href="#"><SPAN class=""><STRONG>More than 2 imprint locations?</STRONG> Test </SPAN></A>
</DIV>

<style>
/* Rule from element "style" attribute */
element.style {
    BACKGROUND-IMAGE: url(/images/img/org4.gif)
}
/* Rule N°8 from inline stylesheet */
.oewBox {
    PADDING-RIGHT: 8px;
    PADDING-LEFT: 40px;
    PADDING-BOTTOM: 16px;
    MARGIN: 0px 0px 6px;
    PADDING-TOP: 6px;
    BORDER-BOTTOM: #ff7c14 3px solid
}
/* Rule N°7 from inline stylesheet */
.oewBox {
    BACKGROUND-POSITION: 0px 0px;
    BACKGROUND-IMAGE: none;
    BACKGROUND-REPEAT: no-repeat
}
/* Rule N°11 from /site/av-files/mainstyles.css */
A:active {
    COLOR: #3b88c4;
    TEXT-DECORATION: none
}
/* Rule N°10 from /site/av-files/mainstyles.css */
A:hover {
    COLOR: #000;
    TEXT-DECORATION: none
}
/* Rule N°9 from /site/av-files/mainstyles.css */
A:visited {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°8 from /site/av-files/mainstyles.css */
A:link {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°7 from /site/av-files/mainstyles.css */
A {
    COLOR: #3b88c4;
    TEXT-DECORATION: underline
}
/* Rule N°52 from inline stylesheet */
A.tooltip {
    BACKGROUND: url(/images/img/question.gif) no-repeat;
    FLOAT: right;
    WIDTH: 19px;
    HEIGHT: 20px
}
/* Rule N°54 from inline stylesheet */
A.tooltip:hover SPAN {
    BORDER-RIGHT: #ff7c14 1px solid;
    BORDER-TOP: #ff7c14 1px solid;
    DISPLAY: inline;
    BACKGROUND: #ffffff;
    BORDER-LEFT: #ff7c14 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #ff7c14 1px solid;
    POSITION: absolute
}
/* Rule N°53 from inline stylesheet */
A.tooltip SPAN {
    PADDING-RIGHT: 3px;
    DISPLAY: none;
    PADDING-LEFT: 3px;
    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    PADDING-BOTTOM: 2px;
    MARGIN-LEFT: -245px;
    WIDTH: 230px;
    PADDING-TOP: 2px
}
</style>

Answer 1

Just a suggestion here. Might want to try qTip. It's a jQuery plugin that works great.

qTip

Answer 2

Hmmm...maybe try changing class=tooltip to class="tooltip"? I don't know what DOCTYPE you are using, but the unquoted attribute might be causing a problem...

EDIT: Did some more research, try this:

replace

A.tooltip:hover SPAN

with

A.tooltip:link:hover SPAN

Answer 3

First do this:

add an HREF to your A. href="#" or something

I would also implement the tooltips like this:

a.tooltip:hover span {
  background:none repeat scroll 0 0 #FFFFFF;
  border:1px solid #FF7C14;
  color:#000000;
  display:block;
  position:absolute;
  top: 0;
  left: -245px;
}

a.tooltip {
  background:url("/images/img/question.gif") no-repeat scroll 0 0 transparent;
  float:right;
  height:20px;
  width:19px;
  position: relative;
}

a.tooltip span {
  display:none;
  font-size:11px;
  font-weight:normal;
  padding:2px 3px;
  width:230px;
}

Answer 4

This is never going to work as is. Consider these two rules:

A.tooltip:hover SPAN {
    DISPLAY: inline;
}
A.tooltip SPAN {
    DISPLAY: none;
}

And ask yourself this: if the span isn't displaying, how could you hover over it?

Answer 5

Some solid tips (I logged in and tested some of it):

• Add zoom:1 to the span and the A tag's CSS.
• By default, position the span relative.

Also, the background on the spans is reading as transparent, so you either have an error in your CSS or something isn't being declared right.

Good luck dear!