while working on a slight mod to my tooltips script I found some very strange happenings.
I found that in IE (although not firefox) IF i overwrote the background-color with the same value by linking a second css file the whole tooltip bacame invisible - BUT if I changed the background-color in the second .css file to a different value -even by just one number the tooltip worked.
does anyone else have any idea if this is an IE/CSS bug of an I missing something?
The code and css go as follows...
Code: Select all
//example useage:{TOOLTIP:{IMAGE:../img/template/tooltip.gif},Tooltip title,Tooltip content...}
// code....
$search[0] = '/\{TOOLTIP:(.*?),(.*?),(.*?)}/';
$replace[0] = '<a class="tooltip" href="#top">$1<span>$2<p>$3</p></span></a>';
Code: Select all
/* TOOLTIPS STYLE*/
.tooltip{
position:relative;
z-index:24;
background-color:#004891;
text-decoration:none;
}.tooltip:hover{
z-index:25;
background-color:#004891;
text-decoration:none;
}
.tooltip span{
display: none;
}
.tooltip p{
color:#FFFFFF;
font-size:14px;
font-weight:normal;
line-height:100%;
display:block;
background-color:#004891;
text-align: justify;
padding:5px;
text-decoration:none;
}
.tooltip:hover span{ /*the span will display just on :hover state*/
font-size:16px;
font-weight:bold;
line-height:150%;
display:block;
position:absolute;
top:0px; left:60px; width:20em;
border:1px solid #999999;
background-color:#004891;
color:#FFFFFF;
text-align: justify;
cursor:default;
padding:5px;
text-decoration:none;
}
Code: Select all
/* TOOLTIPS OVERIDE*/
.tooltip{
background-color:#0099FF;
}
.tooltip:hover{
background-color:#0098FF;
/* I have NO idea why but this value MUST by different to that within the frontend.css to display the tooltip: I have set it to 1 value less in the green - try this code then try again with this color set to 0099FF and whatch as the tooltip no longer appears :S */
}
.tooltip p{
background-color:#006AB2;
}
.tooltip:hover span{ /*the span will display just on :hover state*/
background-color:#006AB2;
}