CSS popup help please!

HouseOfRock · 08-07-2006, 06:30 PM

I am having a heck of a time getting this to work.

http://www.officialhouseofentertainment.com/video.php

Check it out in Firefox to see what I want to happen, and then check IE to see what the problem is. I can't get the z-indexing to display correctly on the pop-up effect. It looks great in FF, but stays under the following thumbnails in IE (please ignore the margining issues for the moment, I am aware of them but got hung up with the z-indexing). Anyone here a CSS whiz that can help me out, or catch some obvious mistake I am making. HELP!

jumpenjuhosaphat · 08-07-2006, 08:34 PM

Here's the CSS I used to make it work:

Code:

 a {position:relative;}

a span{display:none;}

a:hover span {background:#fdcd00}<--sets the bg color and activates the hover for IE, this is important

a:hover span 
{
position:relative;
top:75px;
left:0px;
width:500px;
display:block;
border:1px solid #330065;
}

Then the HTML:

HTML Code:

 <a href="#"><img src="image"/><span>tooltip text</span></a>

I got that to work in all the browsers I have, but opera doesn't allow you to venture to far into the tooltip without shutting it off.

I hope that helps.

I almost forgot to mention, just in case you didn't already know, and for those that don't. You can apply the pseudo class to any HTML element, so if you want to have an anchor tag within the tooltip, you would just replace the a tag in the css with a div tag or a p tag, or any other tag, then you could just place your anchor within the span element.

HouseOfRock · 08-08-2006, 02:22 AM

Thanks for the attempt. What I am trying to do is a little more involved however, as some of the popups will display multiple links. I am basing this off of a similar demonstration: http://www.cssplay.co.uk/menu/balloons.html

I am fairly certain that I must be missing something in my own code, and I'm just not seeing it. Apparently, however, z-index isn't doing the trick in IE.

jumpenjuhosaphat · 08-08-2006, 02:26 AM

I can't promise I can help, I am new to everything, but if you post the code that you use to create the tooltips, maybe, just maybe, I could help you out in figuring what is wrong. It's at least worth a try. Namely the CSS code, cause I found your HTML tooltips code pretty easy.

HouseOfRock · 08-08-2006, 02:49 AM

To view CSS (among other awesome things) I suggest the WebDeveloper extension for Firefox. It's really incredibly useful, and makes CSS coding a million times easier. You can use it to view my CSS, or if you are old fashioned, here's a bunch of CSS:

Code:

/* common styling */
ul#portal {
position:relative; 
width:560px; 
background: transparent; 
margin: 0 -5px; 
padding:0 0 60px; 
border:0;
list-style-type: none;
overflow: hidden;
}

* html ul#portal li{
margin: 0 0 0 25px;
m\argin: 0 0 0 25px;
}

ul#portal li {
display: block;
float: left;
width: 136px;
height: 117px;
margin: 0px 25px 0px 25px;
padding: 0;
position: relative;
}

ul#portal li a.thumb {
display: block;
text-decoration: none; 
color: #000; 
width: 136px; 
height: 109px; 
background: transparent;
position: absolute;
}

ul#portal li a.thumb img{
width: 136px;
height: 102px;
}

/* get rid of the table */
table {
position:absolute;
top:0;
left:0;
}

ul#portal li a img, ul#portal li a:visited img {
border: 0;
text-decoration: none;
margin: 0;
}
ul#portal li a:visited img.thumb {
opacity: .8;
background: #555;
}
ul#portal li a.thumb:hover{
opacity: .5;
background: #555;
}

ul#portal .preview {
position: absolute;
visibility: hidden;
}

ul#portal :hover .preview {
float: right;
visibility: visible;
width: 300px;
top: 75px;
left: 45px;
background: transparent url(../style/images/popup.gif) no-repeat bottom right;
z-index: 100;
font-size: 70%;
}

ul#portal :hover div.preview span{
width: 265px;
position: relative;
left: 32px;
display: block;
text-align: left;
}

ul#portal :hover div.preview span a{
background: #fe6;
color: #335;
display: inline;
position: relative;
top: 0;
padding: 0;
text-decoration: underline;
border-bottom: 1px solid;
}

ul#portal :hover div.preview span a:hover{
color: #669;
border: none;
}

* html ul#portal :hover div.preview a {
top: -28px;
t\op: -28px;
font-size: 90%;
f\ont-size: 90%;
}

ul#portal :hover div.preview a {
color: #ccc;
display: block;
position: absolute;
top: -20px;
right: 0;
width: 300px;
background: transparent url(../style/images/popup.gif) no-repeat top right;
padding: 2px 5px;
height: 25px;
text-decoration: none;
text-align: center;
}

ul#portal :hover div.preview a:hover {
color: #fe7;
text-decoration: underline;
}

ul#portal :hover .hovleft {
left: -230px;
background: transparent url(../style/images/popupleft.gif) no-repeat bottom left;
}

ul#portal :hover div.hovleft span{
left: 8px;
}
ul#portal :hover div.hovleft a{
left: 0px;
background: transparent url(../style/images/popupleft.gif) no-repeat top left;
}

jumpenjuhosaphat · 08-08-2006, 03:31 AM

The problem you are having is due to the fact that the z-index is ignored unless the element is positioned. IE ignores the z-index unless you use position:absolute or a variant of it.
I have a CSS viewer, I just didn't know which css to view, or if you used javascript(I know nothing about that) to make the tooltips.
I hope that works for you, let me know.

08-07-2006, 06:30 PM	#1
HouseOfRock Member Join Date: Jan 2006 Location: Massachusetts Posts: 136	CSS popup help please! I am having a heck of a time getting this to work. http://www.officialhouseofentertainment.com/video.php Check it out in Firefox to see what I want to happen, and then check IE to see what the problem is. I can't get the z-indexing to display correctly on the pop-up effect. It looks great in FF, but stays under the following thumbnails in IE (please ignore the margining issues for the moment, I am aware of them but got hung up with the z-indexing). Anyone here a CSS whiz that can help me out, or catch some obvious mistake I am making. HELP! __________________ Visit my new and improved humor site: It's Just Humor Or check out the newest source for HQ celebrity images: It's Just Babes

08-07-2006, 08:34 PM	#2
jumpenjuhosaphat Forum Admin Contributor Join Date: Jun 2006 Location: Denver Posts: 4,459	Re: CSS popup help please! Here's the CSS I used to make it work: Code: a {position:relative;} a span{display:none;} a:hover span {background:#fdcd00}<--sets the bg color and activates the hover for IE, this is important a:hover span { position:relative; top:75px; left:0px; width:500px; display:block; border:1px solid #330065; } Then the HTML: HTML Code: <a href="#"><img src="image"/><span>tooltip text</span></a> I got that to work in all the browsers I have, but opera doesn't allow you to venture to far into the tooltip without shutting it off. I hope that helps. I almost forgot to mention, just in case you didn't already know, and for those that don't. You can apply the pseudo class to any HTML element, so if you want to have an anchor tag within the tooltip, you would just replace the a tag in the css with a div tag or a p tag, or any other tag, then you could just place your anchor within the span element. __________________ Storage Sheds Lost Forum Last edited 08-07-2006 at 08:50 PM.

08-08-2006, 02:26 AM	#4
jumpenjuhosaphat Forum Admin Contributor Join Date: Jun 2006 Location: Denver Posts: 4,459	Re: CSS popup help please! I can't promise I can help, I am new to everything, but if you post the code that you use to create the tooltips, maybe, just maybe, I could help you out in figuring what is wrong. It's at least worth a try. Namely the CSS code, cause I found your HTML tooltips code pretty easy. __________________ Storage Sheds Lost Forum

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
yellow info box popup thingy	jumpenjuhosaphat	Web Development	3	08-07-2006 01:54 AM

08-08-2006, 02:22 AM	#3
HouseOfRock Member Join Date: Jan 2006 Location: Massachusetts Posts: 136	Re: CSS popup help please! Thanks for the attempt. What I am trying to do is a little more involved however, as some of the popups will display multiple links. I am basing this off of a similar demonstration: http://www.cssplay.co.uk/menu/balloons.html I am fairly certain that I must be missing something in my own code, and I'm just not seeing it. Apparently, however, z-index isn't doing the trick in IE. __________________ Visit my new and improved humor site: It's Just Humor Or check out the newest source for HQ celebrity images: It's Just Babes

08-08-2006, 03:31 AM	#6
jumpenjuhosaphat Forum Admin Contributor Join Date: Jun 2006 Location: Denver Posts: 4,459	Re: CSS popup help please! The problem you are having is due to the fact that the z-index is ignored unless the element is positioned. IE ignores the z-index unless you use position:absolute or a variant of it. I have a CSS viewer, I just didn't know which css to view, or if you used javascript(I know nothing about that) to make the tooltips. I hope that works for you, let me know. __________________ Storage Sheds Lost Forum Last edited 08-08-2006 at 03:37 AM.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)