On http://allmyzip.com/colorbox1/ there is a simple image gallery with the jQuery Colorbox/Lightbox plugin for Wordpress that opens an auto-running slideshow of 500 x 500 images when one of the thumbnails is clicked.
The site is using Wordpress 3.3.1 and the standard, unmodified Twenty Eleven version 1.3 theme that comes default with a new Wordpress install. In IE 9, Firefox 10 and in Chrome 16 all three browsers are showing the slideshow images BEHIND the Header/Navbar.
I have researched this for many hours and cannot find what to change, and/or where, to correct this problem. I created a simple child theme to try to test certain changes to the z-index value in the section of the style.css shown below, as some researched suggestions recomended, but changing the z-index value here to 2 or to 999 or to 99999 still did not get the images in the slideshow to display properly. So, ALL of the CSS running the site is 100% standard, out-of-the-box Twenty Eleven CSS code.
The simple code in the child theme is limited to what you see below: There have been NO changes to the standard code at this time. What shows below is where I tried some previous edits and then returned the settings back to standard:
`@import url("../twentyeleven/style.css");
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
Any specifics as to what needs to be edited and where??
Thanks very much!!
The header id=branding has z-index of 9999, which is the same as the lightbox, so I would expect conflicts.
Change it to 5000 or something, I see in firebug that it fixes the problem.