This one’s actually a bit impromptu as I only just figured it out and wanted to share it with the community in case anyone else comes across the same problem.

Since installing the new themes here and on my other blog, I found that all my image galleries that were put together using the NextGen Gallery plugin (which also uses the lightbox plugin) had all the elements from the navigation bar appearing above the pop-up image. I posted up a question on the WordPress support forums to see if anyone could help, and didn’t get a solution (though someone else posted up that they had the same problem, so I felt happy that it wasn’t just me which was a relief!)… but because I’m prone to lightbulb moments, I thought of something that may be causing the error, and thanks to some poking around with Firebug I found a solution, and it’s all to do with the z-index properties in the CSS files loaded into both of my blogs.

First up, some code:

Previous code:

#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 300;
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

This is the CSS that governs how my navigation bar behaves itself – it seems a little convoluted, but it’s setup like this (and uses the rules that follow) to get the nice jQuery-driven drop-downs that can cascade out to multiple levels (there’ll be more on some PHP tricks I’ve used to customise my nav bar in the concluding post on WP fixes I’ll be posting up later). The property that is causing all the grief is actually the z-index property, which is currently set to 300 as per the tute I used as a reference to put the menu together. If we click on one of the images and wand our cursor over the pop-up version via Firebug to get the properties of the containing divs though, we reveal another z-index property that’s clashing. The #stimuli_overlay div that acts as the parent div for the goodies that follow has a z-index of 90, as referenced via the lightbox.css that is installed as part of the default Lightbox plugin:

lightbox.css

#stimuli_overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}

The solution to this is now simple – either change the lightbox.css file or change your style.css attached to your theme. I chose the latter since I didn’t want to touch the plugin defaults, as it would cause issues later on if the plugin were ever upgraded.

New code:

#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 50; /* Causes bugs for NGG, has to be smaller than #stimuli_overlay z-index, which is 90 by default, so move value of #nav-menu to 50 instead of 300 */
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

There, problem solved – 50 is still ample to ensure the dropdowns sit on top of other elements, and small enough to ensure it doesn’t interfere with the lightbox CSS.

And because I’m big on commenting in my code to avoid getting confused when maintaining it, I’ve also added that great big string of text to my CSS to remember why it’s changed from the standard 300 recommended by the tute I used as a reference.

In theory, you can make the z-index property anything you like, just as long as it doesn’t go above the z-index value of the divs that sit above your page when you call the lightbox plugin via NextGen Gallery.

I was originally planning on writing two WordPress pieces, but I only worked this one out a couple of hours ago and thought I should share 🙂 Next one will be the last, then I’ll get back to the usual program I promise!

Bloginated Wednesday, 10th March 2010 / Wordpress/system stuff
Tag-isms: code | fixes | Lightbox | NextGen Gallery | PHP | plugin | tutorials | Wordpress errors