css bug? quirk? sabotage?...

[pSouper]

hey all,
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>';

the first css (frontend.css)

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;
	}

The css overide (cat2.css): This css overide is unique to each category within the website and alters the background-color to suit.

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;
	}

[Kosse]

Hi London

Dunno exactly WHAT is the trouble but seems related to positioned boxed and IE... Gosh, I love CSS and IE (and sometimes FF as well)

Anyway, if u have time you might wanna look at these:
--> whatever:hover or hasLayout // Explains the hasLayout problem
--> In IE words An obscur MS CSS page // MS explains
--> or even here: positioniseverything // more explanations

PS: have you tried in IE7? They claim (http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx) to have solved it
Cheers and GL to England 4 2nite (and to Sweden as well actually

[pSouper]

Thanks for the sites Kosse,

I will have lots of fun discovering more bugs I never knew about and still can't fix

I had a quick read through all the pages but nothing jumps out that may explain my specific issue BUT they do highlight a few weaknesses that may or may not be contributary.

[Kosse]

Thanks for the sites Kosse,

I will have lots of fun discovering more bugs I never knew about and still can't fix

Same here
Just looking at it (but not knowing how and why), I think it might be a combination of the position:relative; IE has trouble with AND the :hover state, those two seems IE problematic sometimes.

Cheers