Banner / Links / Menu over the Thickbox image
ISSUE:
These days I have been experimenting a big problem – on another blog of mine when I clicked on the pictures from the the first rows of the photo gallery, (I use Thickbox to display images) the categories links appears above the Thickbox image. This problem comes up in Internet Explorer and Firefox.
SOLUTION:
The problem is z-index value and you have to change the theme’s #links_menu_over z-index to a lower value than that of thickbox’s z-index .
To fix the problem follow next steps:
1. Open the .css file, from your wordpress theme (or whenever website you have), regularly named style.css. You can use notepad if you don’t have other html editor.
2. Locate your Banner / Links / Menu div. In my case I modified #categories. Change the z value like this: z-index: 5;
Mine:
#categories {
margin-top: 11px;
margin-bottom: 45px;
z-index: 5;
position: relative;
}
If you don’t know where to look do a search for “z-index”. Yours should be that one linked to Banner / Links / Menu and could be in this form: #banner, #links, #menu it depends of what it’s appear above your Thickbox image.
3. Open Thickbox.css, locate #TB_overlay and modify the value of z-index to be bigger than the above value. In my case I put z-index:100;
Mine:
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
4. Copy both .css files over the originals using the ftp.
Right now your photo gallery website should work like a charm :)
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
hello to fix the size for the thickbox you said open the CSS file can you tell me what CSS?
I’ve thought I was very clear: open website CSS and Thickbox.css. Like I said, all you have to do is to modify the z-index value of both or to add a z-index value if none.
Thanks for the great work! Cool blog. You will find a number of opinions on this topic and this blog states the issue very good.