css bug? quirk? sabotage?...

Post non-phpwcms related topics here - but I don't want to see "hey check this or that other cms". Post if you have a point or worthwhile comment, don't post just to increase you post count!
Post Reply
User avatar
pSouper
Posts: 1552
Joined: Tue 11. Nov 2003, 15:45
Location: London
Contact:

css bug? quirk? sabotage?...

Post by 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;
	}
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post by 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) :twisted:

Anyway, if u have time :D :D 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 :)
User avatar
pSouper
Posts: 1552
Joined: Tue 11. Nov 2003, 15:45
Location: London
Contact:

Post by pSouper »

Thanks for the sites Kosse,

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

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.
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post by Kosse »

pSouper wrote:Thanks for the sites Kosse,

I will have lots of fun discovering more bugs I never knew about and still can't fix :D
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
Post Reply