A Hidden Pop-up Box With CSS Only A great trick I cant conduct completely

[pyost 0]

I am currently developing an online application where people will be able to store their school grades along with comments. I wanted to make comments look elegant, so I decided to use a hidden box that would appear when hovering over a certain grade. I've found a way to do it without JavaScript, and that is by using pure CSS and relative/absolute positioning. But that's not the main problem.

 

When I hover over a grade, the normal text is covered by the box (it overlaps the text), but the other grades aren't. I suppose that is happening because the grades have "position: relative" And that's what I need help about. How to alter my CSS so the box overlaps everything?

 

You can see the problem here, and my CSS file here

[TavoxPeru 0]

Can you please check your problem link because it doesn't shows your problem, only opens your page but nothing happens when hover over a grade.Best regards,

[pyost 0]

What browser are you using? I am sure the pop-up box works in Firefox and customizing it for other browsers will be sorted out later on.

[TavoxPeru 0]

What browser are you using? I am sure the pop-up box works in Firefox and customizing it for other browsers will be sorted out later on.

Basically I use IE 6 and Firefox 1.5x, when i view it with IE nothing happens as i said and right now i just view it with FF and works fine.

When you say to overlap everything do you mean to overlap all the text that appears on your page, for example overlapping your sidebar???? May be you can use the z-index property to do that.

Best regards,

[iGuest 3]

When I hover over a grade, the normal text is covered by the box (it overlaps the text), but the other grades aren't. I suppose that is happening because the grades have "position: relative" And that's what I need help about. How to alter my CSS so the box overlaps everything?

 

Right. Well, the problem here is not related to the position but rather to the z-index.

 

 

All you have to do is make the following modifications to the Cascading Style Sheet file:

 

 

#ocene a.imp {

color: #ff0000;

z-index: 1;

}

 

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

z-index: 2;

}

 

 

This will set the span 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, pyost. If not, please let us know so that we could continue working on it

 

 

-------

EDIT:

-------

 

I'm sorry, TavoxPeru. I wrote my post while you were writing yours and didn't notice it

 

 

 

 

Cheers.

Edited November 29, 2006 by TaMeR (see edit history)

[pyost 0]

I have never heard of that property before, and I'll be sure to remember it, but it isn't helping here. I tried editing various CSS parts with z-indexes, but it didn't change. I probably wasn't quite precise at explaining the problem, so here's a specific screenshot.

[iGuest 3]

Yes, pyost, that's what I understood from your first post. And the modification I mentioned above fixes this.

 

 

I saved the page in question and the style sheet file to my hard disk, changed the <link href="..."> attribute accordingly, modified the style sheet file, and opened the page. The box now covers all the page content within its dimensions.

 

 

Are you sure you modified the style sheet file properly? Perhaps you could try copying and pasting the following code directly into the style sheet after clearing it and see how it goes... it's your original CSS with the modification:

 

html {	height: 100%;}body {	background: #ffffff url(images/bg.png) repeat-x top left;	margin: 0;	padding: 0;	font-family: Verdana, Tahoma, Arial, "sans serif";	font-size: 12px;	text-align: center;}a {	text-decoration: none;	color: #2780f9;}a:hover {	color: #000000;}td {	font-size: 12px;}#wrapper {	margin: 30px auto 0px auto;	background-color: #ffffff;	width: 788px;	border: 1px solid #ffffff;	text-align: left;}#header {	width: 100%;	background: #8d9299 url(images/logo.jpg) no-repeat top left;	height: 100px;}#ocene a {	text-decoration: none;	margin-left: 5px;	margin-right: 5px;	color: #0000ff;	font-weight: bold;	position: relative;}#ocene a:hover {	border: none;}#ocene a span {	display: none;}#ocene a.imp {	color: #ff0000;	z-index: 1;}#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;	z-index: 2;}#ocene td {	line-height: 20px;	text-align: center;	padding: 2px;	width: 125px;}#ocene #top1 {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene #top2 {	border-top: 1px solid #dedede;	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;	height: 30px;	line-height: 30px;}#ocene #top3 {	border-top: 1px solid #dedede;	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;	height: 30px;	line-height: 30px;	}#ocene .subject {	border-right: 1px solid #dedede;	border-left: 1px solid #dedede;	border-bottom: 1px solid #dedede;	background-color: #f0f0f0;}#ocene .empty {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene .avg {	border-bottom: 1px solid #dedede;	border-right: 1px solid #dedede;}#ocene .avgempty {	border-bottom: 1px solid #dedede;}#ocene .main {	border-right: 1px solid #dedede;	border-bottom: 1px solid #dedede;}#ocene .allavg {	border-right: 1px solid #dedede;	border-left: 1px solid #dedede;	border-bottom: 1px solid #dedede;	width: 400px;}input {	background-color: #ffffff;	border: 1px solid #000000;	padding: 1px;}#sidebar {	width: 200px;}.module {	width: 200px;	background: #ffffff url(images/module.png) repeat-x top left;	margin-bottom: 20px;	font-size: 12px;}.module h3 {	height: 40px;	line-height: 40px;	padding: 0 10px 0 10px;	margin: 0;		font-size: 20px;	text-transform: lowercase;	font-weight: normal;	border-bottom: 1px solid #ffffff;}.module a {	display: block;	width: 180px !important;	width: 200px;	margin: 0 auto 0 auto;	padding: 0 10px 0 10px;	line-height: 22px;	text-decoration: none;	color: #000000;	border-bottom: 1px solid #ffffff;}.module a:hover {	color: #ffffff;	background-color: #8d9299;}#active {	color: #ffffff;	background-color: #8d9299;}#footer {	height: 30px;	text-align: center;	line-height: 30px;	background-color: #8d9299;	color: #46494d;}#footer a {	color: #46494d;}#footer a:hover {	color: #ffffff;}

And I know it might be too obvious, but I forget to do it all the time... did you refresh the page after you modified the style sheet?

Edited November 29, 2006 by TaMeR (see edit history)

[pyost 0]

Wierd.. It's working now, but it isn't logical! I have set the z-index property in a.imp, but not in a, and that's when it's working. However, if I set it for a, too, it isn't displayed correctly. It's weird, because only the red grades are .imp. Any explanation why this is so?

 

~edit~

 

Aah, the problem is still there, sort of. The blue grade comments are working fine, but the red grade ones are above red and below blue grades

[pyost 0]

OK, as far as I can see, the problem is solved in both Opera and Firefox. I just added the second CSS modification, which is this:

#ocene a:hover span {	display: block;	background-color: #e5e5e5;................	z-index: 100;}

That way, I am telling the comment to be above everything else with a z-index of 100. However, Internet Explorer doesn't seem to get it. It still displays grades above the comment. I don't know it it's because the anchors are relative, but it is really bothering me

[FirefoxRocks 0]

Internet Explorer is such a weird browser.

Firefox and Opera seem to display it properly. And yes, your problem is solved with a z-index with positioning. You can learn more about CSS at the W3Schools website.

 

I don't think that it is a huge issue because the grades are small but if you want to fix that, I'd recommend a little more than CSS.

[vizskywalker 0]

It seems to work fine in IE7. You may just want to put a link at the bottom to the firefox download page or the IE7 download page or both. IE6 is outdated, and people really ought to upgrade to IE7 if they still use it.~Viz

[pyost 0]

Yeah, it does work fine in IE7, but many people are still using IE6 probably because they:1) Have an extremely slow connection, so they can't update2) Don't know how to update/don't even know that there is an updateI am still following the rule that it must be the same in all browsers, or at least most of them. And leaving out IE6 (and lower) isn't an option for me.What about JavaScript? I'm not a JS fan, but if it can solve this problem, I'll have to use it

[iGuest 3]

Does this page help you at all?
http://forums.xisto.com/no_longer_exists/

Edited August 30, 2007 by jlhaslip (see edit history)

[toby 0]

Does this page help you at all?http://forums.xisto.com/no_longer_exists/

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

[pyost 0]

Does this page help you at all?

http://forums.xisto.com/no_longer_exists/

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.