Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.


Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Replying to A Hidden Pop-up Box With CSS Only

Post Options

Enable emoticons?

Enter Your Name

Security Check *

[quote name="TaMeR" post="92864" timestamp="1164838262"] Right. Well, the problem here is not related to the [b]position[/b] but rather to the [b]z-index.[/b] All you have to do is make the following modifications to the Cascading Style Sheet file: #ocene a.imp { color: #ff0000; [color=#FF0000]z-index: 1;[/color] } #ocene a:hover span { display: block; background-color: #e5e5e5; border: 1px solid #000000; width: 300px; position: absolute; top: 30px; left: 15px; padding: 2px; font-weight: normal; color: #000000; [color=#CC0000]z-index: 2;[/color] } This will set the [b]span[/b] container higher than its OWN container on the stack order. And the nice thing here is that it won't affect any other aspect of the document, since the z-index only works on elements that have been positioned, e.g. the <a> block. I hope that's what you were asking for, [i]pyost.[/i] If not, please let us know so that we could continue working on it [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/tongue.png[/img] [color=#000099][b]------- EDIT: -------[/b][/color] I'm sorry, [i]TavoxPeru.[/i] I wrote my post while you were writing yours and didn't notice it [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/wink.png[/img] Cheers.[/quote] [quote name="TaMeR" post="92864" timestamp="1164838262"] Right. Well, the problem here is not related to the [b]position[/b] but rather to the [b]z-index.[/b] All you have to do is make the following modifications to the Cascading Style Sheet file: #ocene a.imp { color: #ff0000; [color=#FF0000]z-index: 1;[/color] } #ocene a:hover span { display: block; background-color: #e5e5e5; border: 1px solid #000000; width: 300px; position: absolute; top: 30px; left: 15px; padding: 2px; font-weight: normal; color: #000000; [color=#CC0000]z-index: 2;[/color] } This will set the [b]span[/b] container higher than its OWN container on the stack order. And the nice thing here is that it won't affect any other aspect of the document, since the z-index only works on elements that have been positioned, e.g. the <a> block. I hope that's what you were asking for, [i]pyost.[/i] If not, please let us know so that we could continue working on it [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/tongue.png[/img] [color=#000099][b]------- EDIT: -------[/b][/color] I'm sorry, [i]TavoxPeru.[/i] I wrote my post while you were writing yours and didn't notice it [img]http://www.astahost.com/public/style_emoticons/#EMO_DIR#/wink.png[/img] Cheers.[/quote]

or Cancel

Topic Summary

pyost

Posted 02 December 2006 - 11:05 PM

Yup, exaclty the problem I'm worried about.

saint-michael

Posted 02 December 2006 - 10:46 PM

It basically looked like that in IE7 with most of the except the last one in which the gray area was completely soild, but it Firefox it was completely solid on each hover.

I think I know what you are talking about, and that's probably what I want to solve. But it wasn't completely transparent, right? You could see the other grades, but not the table lines - and in the bottom, there were no grades behind the comment. Am I right?

saint-michael

Posted 02 December 2006 - 08:10 PM

Well since I can't show you a print screen (erased the example) basically I could see through the box when you hover over the score. It that to all of them except for the last set of scores.

pyost

Posted 01 December 2006 - 09:47 PM

I know z-index of 1 would have been enough, but I prefer it this way. If necessary, I can insert more classes with the index between 1 to 100. And 100 is a better-looking muber

Also have you thought about what mac Ie 5 would look like and netscape as well?

I didn't want to think about Mac, because I'm 100% sure that 0.01% of the visitors would be using it. In my country, XP is the way to go

what about the transparency effect in IE7 you have on the 2+? All them except for the last one are transparent.

I didn't quite understand this part. Would you mind exaplaining it again (since I don't have IE7)?

saint-michael

Posted 01 December 2006 - 08:20 PM

what about the transparency effect in IE7 you have on the 2+? All them except for the last one are transparent.

although this could have been fixed a z-index of 100 seems to be a bit extreme if you remember the problem I was having (fixed it) a z-index of 1-5 should be sufficient unless I am missing something.

Also have you thought about what mac Ie 5 would look like and netscape as well?

vizskywalker

Posted 01 December 2006 - 07:53 PM

What about JavaScript? I'm not a JS fan, but if it can solve this problem, I'll have to use it sad.gif

Javascript can be used to accomplish this, I know because I've done it before. But it is extremely messy, and ugly. If we can't think of anything else, I'll take a crack at coming up with some JS code for you. All of my samples use Javascript's UOOP so they probably aren't what's best suited and I'd need to convert.

~Viz

pyost

Posted 01 December 2006 - 07:38 PM

Does this page help you at all?
http://jlhaslip.trap...mples/tooltips/

Actually, that is mostly the code I use. Therefore, you have the same problem, too. When I reduced the font size, the box connected to the first link appeared behind the third link. z-index would solve the problem, but only in IE7, Firefox and Opera.

toby

Posted 01 December 2006 - 07:13 PM

Does this page help you at all?
http://jlhaslip.trap...mples/tooltips/

Oddly in Opera 9, you have to click the link to see the first line.

Posted 01 December 2006 - 07:00 PM

Does this page help you at all?
http://www.jlhaslip....mples/tooltips/

Review the complete topic (launches new window)