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>
