Question

So I had to create this splash page in a very short amount of time. Its done will all images.. etc. (its crap, i know. but needed to go up and seo isnt important)

Problem is the inputs are placed “absolute” over top of the images and in IE (of course IE!!) the form inputs arent realy clickable.

link: savemoneytampa.com

html:

<div id="container">
    <form name="form" method="post" action="#">
        <label for="total_card_sales" class="calcLabel">Total Card Sales</label> <input id="total_card_sales" type="text" value="0" />
        <label for="total_deposits_received" class="calcLabel">Total Deposits Received</label> <input id="total_deposits_received" type="text" value="0" />
        <label for="total_processing_cost" class="calcLabel">Total Processing Cost</label> <input id="total_processing_cost" type="text" value="0" disabled="disabled" />
        <label for="total_processing_cost2" class="calcLabel">Total Processing Cost</label> <input id="total_processing_cost2" type="text" value="0" disabled="disabled" />
        <label for="total_card_sales2" class="calcLabel">Total Card Sales</label> <input id="total_card_sales2" type="text" value="0" disabled="disabled" />    

    </form>
    <div id="epr">0%</div>
    <img src="1.png" />
    <img src="2.png" />
    <img src="3.png" />
    <img src="4.png" />
    <a href="index2.html"><img src="5.png" /></a>
    <img src="6.png" />     
</div>

css:

img { border-collapse: none; display: block; z-index: 1; position: relative;}
body { background: url(bg.png) repeat-x; }
#container { width: 936px; margin: 0 auto; position: relative; z-index: 1;}
form { position: absolute; }
label { display: none; }
input { border: none; background: transparent; width: 145px; height: 22px; font-size: 18px; z-index: 999; }
input#total_card_sales { position: absolute; top: 426px; left: 178px; }
input#total_deposits_received { position: absolute; top: 426px; left: 390px; }
input#total_processing_cost { position: absolute; top: 426px; left: 575px;color: #00395a; }
input#total_processing_cost2 { position: absolute; top: 500px; left: 178px; color: #00395a;}
input#total_card_sales2 { position: absolute; top: 500px; left: 390px; color: #00395a; }
#epr { color: #00395a; font-weight: bold; font-size: 30px; position: absolute; top: 567px; left: 535px; font-family: arial;}

Answer 1

set z-index for the form to 2

 form { position: absolute; z-index: 2}

Edit:

Ok, it’s not about z-index. IE has a problem with fields that have transparent background. They become partially unclickable (only the side with text is clickable).

To fix it, use this

input { border: none; background-color: transparent; background-image: url('.'); width: 145px; height: 22px; font-size: 18px; z-index: 999; }

The added part is background-image: url('.');.