Page header floating over thickbox window

  • I am using the Auto Thickbox Plus plugin to make my photos pop up with a lightbox effect. The problem I am having is that the page header (the site title, the banner graphic and the main menu) all float on top of the pictures when they pop up. Not only that, but they are not darkened like the rest of the page.

    So essentially, these elements are being ‘missed’ by whatever transformation Auto Thickbox applies to the page to force it into the background.

    If I use the mouse wheel to scroll down while an image is displaying, the header moves up with the rest of the page so it is no longer on the image. But that is obviously not a solution!

    Previously Thickbox was working fine. I’m not sure when this problem started happening – possibly it was with the upgrade to WP 3.3, but since then I have installed other plugins that might have created conflicts. For example, I have recently tried and discarded a few different gallery plugins. I am currently using ‘File Gallery’, but deactivating it makes no difference to the Thickbox behaviour. I have also recently run the ‘Go Live’ plugin which replaces all root URLs with different ones (in this case my local IP address, as I am playing with a local installation of WordPress), but did not replace URLs in the “wp_options” table. (I don’t know what that means, but I thought I’d mention it in case it is relevant!)

    Can anyone tell me what might be going on?

    As I am running a local installation I currently have no way to share my site with the world – I hope my description above is adequate!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Oh, I also have missed this topic.
    I added “auto-thickbox-plus” tag to this topic.

    Thank you for reporting the problem to me.
    This problem caused by TwentyEleven theme CSS.
    As you may know, I fixed it at version 0.5 about six weeks ago.

    Thread Starter angusv

    (@angusv)

    You did indeed fix it! ??

    Any updates on this fix? My only other solution is to sub-theme another theme, which I am hoping to avoid. I have only seen this problem with the twenty eleven theme.
    Thanks.

    This problem is caused by CSS z-index written in style.css of Twenty Eleven theme.

    Twenty Eleven header has 9999 z-index in wp-content/themes/twentyeleven/style.css.

    #branding {
	z-index: 9999;
}

    But original ThickBox window has about 100 z-index in wp-includes/js/thickbox/thickbox.css.

    #TB_overlay {
	z-index:100;
}
#TB_window {
	z-index: 102;
}
#TB_load{
	z-index:103;
}
#TB_HideSelect{
	z-index:99;
}

    Therefore Twenty Eleven header covers (hides) ThickBox window. The solution is either to decrease z-index in style.css, or to increase z-index in thickbox.css. And I adopted the latter one (multiplied all z-index by 100).

    That worked on all my sites. I decreased the z-index in #branding. Thanks.

    Started using a new child theme with Twenty Eleven and this problem popped up. Decreased z-index in the Twenty Eleven child theme (in #branding, like mentioned above) and the problem went away. Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Page header floating over thickbox window’ is closed to new replies.