IE7 issue with Z-index of position absoluted containers... and it going UNDER embedded PDF's!

Hey everyone! Got a fun situation for you guys in IE7!

A "working" example is here for your viewing pleasure: (

The problem: We are using simple modal to deliver "email to a friend" functionality. It works great everywhere EXCEPT for IE7. For those familiar IE7 has that pesky problem where Select, Embed, and Object have indefinite Z-index, and therefore getting things like drop down menu's or modals over them is hellacious.

So, how many of you have encountered this, and what was your solution? I've read the whole "params" option and I've tried it to no avail. I've tried the parent container Z-index to no avail. Any other tricks out there?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

use javascript to hide the elements (select, object etc etc) just before you pop the modal window up and unhide them just before it closes
Hi beemerrider130hp.
You can use the onShow & onClose events of the modal to set the visibility of the embed container In your jquery.simplemodal-1.3.4.min.js modify the function as below and give the id="embedded" to the div containing your embed

I've also attached an extracted working example to show you how it works

P.S do not overwrite any of your files with the files I've attached


// in your HTML //
<div id="embedded" style="position:relative; z-index:0;">
<object width="952" height="650" style="z-index:0; position:relative;">
	<param NAME="wmode" VALUE="transparent">
	<embed src="/articles/0906-maintaining-your-credit.pdf" width="952" height="650"/>

// In Your jquery.simplemodal-1.3.4.min.js //
jQuery(function ($) {
	$('#mailFriendLink').click(function (e) {
		onShow: function(dialog) {document.getElementById('embedded').style.visibility="hidden";},
		onClose: function(dialog) {document.getElementById('embedded').style.visibility="visible";$.modal.close();}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
beemerrider130hpAuthor Commented:
Great solution! I should have thought of this, but I was so stuck in the concept of trying to enable the functionality instead of simply flat out skip IE7's lack of proper functionality! Great job!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.