View Full Version : Layering problem with Lightbox and AJAX tabs

02-25-2008, 02:13 PM
**UPDATE** -- This thread has been resolved. Review further for reference only....


I’m hoping this is a relatively simple question regarding a 'layering' problem between Lightbox2 and what I think are AJAX tabs. Of course the problem is occurring in IE(7) and no problems are apparent in Firefox at all...

My question stems from my recent decision to switch from Blogger to WordPress. I picked up Lightbox2 here on DD a while back to use on my Blogger site (http://codyredmon.blogspot.com) and it's been great. For my new WordPress site (which is in Maintenance Mode at the moment), I picked up the WP Lightbox2 plug-in and it works great also. Here's what I can’t seem to wrap my head around, though, and I have a screencap for reference (http://www.codyredmon.com/images/optionsbug/under-overlay.jpg) (inserted below also). All of the images load perfectly…the Lightbox scripts and styles are all healthy, no problems there. It’s those blasted tabs... In the screencap you’ll notice the Lightbox background overlay and image have loaded fine, but the tabs are visible on top of those elements.

Here's a live demo (http://justintadlock.com/options/) of the WP template I'm using - you'll see the tabs in question labeled "Latest, Popular, Etc." in the upper-right. And here's the direct download link (http://justintadlock.com/downloads/options.zip) for the theme files if anyone wants to look at the code. I'm using a simple rel="lightbox[]" for my images...nothing more.

It should be noted that I also have a forum question in to Justin Tadlock, the theme's developer and am hoping between these two threads I can shine some light on a fix. He's already suggested setting the z-index for the tabs to a lower number in the stylesheet, but I've gone as low as -500 with no positive results. I've already considered reducing the viewing size of my images, but horizontal and square format (as you can see) photos would end up being quite small and the tabs would still be visible on top of the dark background overlay. (Are they even AJAX tabs, or just CSS?...I'm a bit lost on that front. I half-think they're CSS because here I am adjusting their properties as a fix in a stylesheet, but as I said, I'm behind the curve a bit...)

Any help or suggestions would be greatly, greatly appreciated. Many thanks in advance.


02-25-2008, 02:28 PM
Well, I'll be. I guess I was working out of my cache, cause I set the z-index to 0 and finally used my F5 key and the problem is fixed. I love that I just posted up a novel 15 minutes ago and already have my fix...

Well, at least it's here to take note of.