CSS Image Rollover Z-Index and Lag Problem

Hey guys,

I'm having a problem with a page on a site that I am building.

It's a timetable table with class times and a description (an image effectively) for each time-slot which appears upon rollover.

It works perfectly in Firefox, Safari, Chrome etc.

However in IE I am having 2 problems.

#1 The rollover image is appearing behind the text of some of the other rollovers.
#2 The images lag by about 2 seconds each both to appear and disappear.

This is causing enormous frustration as it's one of the very last things left to finish.

The website is here (I must warn that although it isn't anything bad, it is the website for a pole dancing studio so if you are at work, I don't want you in trouble): http://conquest-solutions.com.au/hph/Timetable/CurrentTerm/tabid/75/Default.aspx

Some example code here:

<div id="pic_left"><a class="p1" href="javascript:void(0);">BEG 2<img width="405" height="308" src="/HPH/portals/1/content/descriptions/beginners2.png" alt="Class description" class="large" /></a></div>

Code (markup):

and CSS for this code here:

#pic_left {
	position: relative;
	text-align:center;
	width:100px;
	direction: ltr;
}

#pic_left a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: relative;
	top: -1px;
	width: 1px;
	z-index: 1000;
}

#pic_left a img {
	border: 0;
	position:relative;
	z-index: 100;
}

#pic_left a.p1, #pic a.p1:visited {
	border: 0px;
	display: block;
	background: #f2f2f2;
	left: 0;
	text-decoration: none;
	top: 0;
	color: #161616;
	font-weight:100;
	font-size:smaller;
	background: transparent;
	position:relative;
	text-align:center;
}

#pic_left a.p1:hover {
	background-color: #ED008C;
	color: #161616;
	text-decoration: none;
	direction: ltr;
}


#pic_left a.p1:hover .large {
	border: 0px solid #000000;
	display: block;
	height: 283px;
	left: -420px;
	position: absolute;
	top: -60px;
	width: 405px;
	direction: ltr;
}

Code (markup):

Does anyone have any idea on how to help me with this??

 

I left you a PM at the other forum. Though not sure if it's exactly what you want.

You can reply to either forum, but I have trouble posting in threads at the other one.

 

Hey dude, yeh I haven't recieved a PM from you on the other site unfortunately.

Maybe try posting here or PMing me here if you are having trouble there.

Cheers!

 

My message:

whew, I'm glad I didn't delete my recent spate of sent messages!

Though I've been testing posting over there again and I've been able to even post URLs without the filter snagging me out.

 

Hey dude,

thanks very much for the reply.

I like a lot of your thinking, it could work.

The reason there's a whole bunch of contradictory code is because I copied a code and adapted it to me - ie code originally had a border, so I just quickly changed it to 0px as I didn't want one.

I will clean up my code tonight sometime.

Anyway, the rollover that I wanted to implement is this one here.

http://moneytreesystems.com/css/picpopup.html

I basically copied the code and adapted it myself (adding a z-index to bring the image rollover to the front).

Hope this helps. I still haven't solved this and it's the last thing really stopping me before I hand over the site.

 

While there might be a typo in the code I had above, it should work because I use it every day.

<a href="#"><img src="thethumbnail" alt="" /><img src="thebigone" alt="" class="large" /></a>

a {
position: relative;
}

a img.large {
position: absolute;
left: -999em;
top: 0;
}
a:focus img.large, a:hover img.large {
left: 70px;
top: 10px;
}

IE might need a trigger:

a:hover {
visibility: visible;
}

This same technique is used for CSS dropdown menus and CSS tootltips.

In the olden days people used display: none and display: block to hide and show. Nowadays we just shift it offscreen and then pull it back on with either "left" or you can also do it with margin-left (if IE would prefer that).

Since everyone is either static or relatively positioned, you shouldn't need z-index because an absolutely positioned element gets a naturally higher z-index anyway without you having to say so. If there are multiple abso-po'd images onscreen at any given time then the last one stated in the code comes out above the others. In this case, it's then a good idea to add a manual z-index. You can keep them low like 10, 15, 20 or whatever.

IE6 is still the only browser who should have a flickering problem. I still have this with my opacitycrap page and if I cared enough about that browser for a page like that I'd use one of the googled solutions to IE6's flickers (it's reloading the image every time instead of caching it).