DIV overlap on top of submit order INPUT button not working right in IE7

Question

I created a test account at www.avaline.com that you can use to see what's going on with the submit button without going through the registration process (filling in fake address info, etc):

username: [email protected] pass:test02

In FF, my #hidSubm DIV covers the "Pay with Paypal" Input button, as it should. Why isn't it working in IE7?

I fixed this by making the #hidSubm DIV into a TABLE. Why would I have needed to do that?

This is the instructions for how to see the IE7 bug before I fixed it...although I don't understand why my fix worked: In order to check this out, log in with the account above, make sure at least one item is in your shopping cart, hit "proceed to checkout", and check off "PayPal" as your payment method (this way the payment won't go through for testing purposes). Once you're on the "review and submit" page, in IE7 (at least), hover over the "pay with Paypal" button, and you'll see that the cursor is a hand when you hover over the text or the button border, but it's a regular arrow when you hover over the button part. If you try clicking on the arrow-cursor area, you'll get the error that you should see...but if you click on the hand-cursor area, you get redirected to the paypal page.

Using Debugbar with IE7, I even removed the value element from the #submitter INPUT element, and made sure it kept some sort of width, and without that value text, my #hidSubm DIV wasn't forced under any element of the #submitter input button. This is what I entered in Debugbar to test this out: document.getElementById('submitter').value= ""; document.getElementById('submitter').width= "100";

Answer 1

Your login doesn't work, but I see you are using jquery for your site.

Here's a little z-index fix-all script for you:

// Fix IE indexing bug
if(navigator.userAgent.match(/MSIE \d\.\d+/)) {
    var zIndexNumber = 1000;
    $('div').each(function(){
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
}

As you can see, it goes through each div and assigns a z-index do it. This makes you able to explicitly set a z-index to items so that you can be sure they will overlap in an expected way.

Hope this helps.