z-index issue on Twenty Eleven WordPress theme with jQuery ColorBox

0
votes

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!!

2
wordpressz-indexcolorbox
Is the site (allmyzip.com/colorbox1) the site with the issue? I don't see any issues with the display; the images are coming up fine in the lightbox, although there is no modal effect. – user1086498
Yes, the site above is the site. See this page: allmyzip.com/image-behind-header for a screenshot of the issue when the page gets scrolled up and down. Thanks!! – Bruce

2 Answers

0
votes

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.

0
votes

It seems to me that

.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
border-image: initial;
}

may need to include

position:absolute;
z-index:20;