943,793 Members | Top Members by Rank

Ad:
Aug 23rd, 2007
0

z-index problem

Expand Post »
I have a problem, I have this tooltip scripting...

The tooltip goes at the back of the next image.


thanks guys

here is the script

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#FFF;
color:#000;
text-decoration:none}

a.info:hover{z-index:25;
background-color:#FFFFFF;
}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
padding:2px;
top:0em; left:1em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: left;
font-family:Tahoma, Verdana, Arial;
font-size:12px;
}

use image as link wrapped in a DIV!

thanks
Last edited by php_noob; Aug 23rd, 2007 at 10:16 pm. Reason: for more specific understanding of the problem
Similar Threads
Reputation Points: 10
Solved Threads: 2
Junior Poster in Training
php_noob is offline Offline
81 posts
since Jul 2007
Aug 23rd, 2007
0

Re: z-index problem

You could use for example z-index: -10; lower numbers will put an object in the background.
Reputation Points: 52
Solved Threads: 23
Posting Whiz in Training
martin5211 is offline Offline
271 posts
since Aug 2007
Aug 24th, 2007
0

Re: z-index problem

z-index is not well supported.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Aug 24th, 2007
1

Re: z-index problem

yes, it's true, but you can use a condition like this to deal with compatibility issues:

php Syntax (Toggle Plain Text)
  1. <? if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') == true)) { ?>

I'm using z-index and I haven't see strange issues http://agec.ath.cx/lead maybe you could see a solution there

Web developer toolbar in firefox is a great tool to see CSS properties and change values on the fly.
Last edited by martin5211; Aug 24th, 2007 at 12:26 am.
Reputation Points: 52
Solved Threads: 23
Posting Whiz in Training
martin5211 is offline Offline
271 posts
since Aug 2007
Aug 24th, 2007
0

Re: z-index problem

Just a quick guess, but you may find it's the classes.

If I'm correct, you have multiples of these "image pop-ups", all with the same classes.
so if you think about it, you have multiple little boxes with popup layers, all basically overlapping each other.

The problem occurs for the Popups though...

You have applied a z-index to the Links (a:info) when inactive and when hovered over.... but not applied a z-index to the actual tooltip/popup!
Try adding z-index: 30; to a.info:hover span
see what that gets you.
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Page "bleed" off edge
Next Thread in HTML and CSS Forum Timeline: CSS Menu Not Working on Mac





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC