The header of my site has a button which, when clicked, should bring up a popup, with a form inside, (just below the button) allowing customers to search the site.
My Jquery code to do this:
<script type='text/javascript'>
$(document).ready(function () {
$('#search-my-size-inner').click(function() {
$('#search-my-size-lightbox').toggle();
$("#search-my-size-lightbox").css("z-index","1000");
});
});
</script>
My div, search-my-size-lightbox, has the following CSS.
.lightbox-search-my-size { color: #673645; opacity: 0.9; filter:alpha(opacity=90); background: #fff; }
#search-my-size-lightbox { position: absolute; width:390px; right: 0; top: 26px; display: none; }
And the div is:
<div id='search-my-size-lightbox' class='lightbox-search-my-size'>my content </div>
This works fine on all browsers except IE7. The 'z-index' is unnecessary since I can do that from CSS, but it was worth a try for IE7 but still did not fix the bug.
The bug is that the div is "hidden" (or blocked) by several other absolute and relative elements below. If I move the div way down to before the "/body" tag, then the div shows. However, I need it up in the code within its parent "relative" tag to position is correctly.
The div shows fine over normal content, it is just that there are some big home page banners below the header, with several relative and absolute divs, which block the popup content. If I remove those "position" attributes, then the popup shows fine, but of course the home page banners' layout is messed up so this is not a solution.
Also, if I change #search-my-size-lightbox to position: relative, then it will work, but this simply pushes content down, and I need an absolute, popup-like div.
The following looks useful but doesn't seem to work for me: 1. Positioning divs with z-Index in Internet Explorer 7 2. http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/ 3. IE7 relative/absolute positioning bug with dynamically modified page content
Any advice would be appreciated, Many thanks!
