Disabled input in IE

[KeredDrahcir]

I'm trying to create a form where I want two text input fields one on top of the other but to top input field wont work. When I hover over it, all I get it the mouse arrow rather than the text one.
This works fine in Firefox but not in IE. Is there any way to sort it out.

<div style="position: relative;">
  <form name="subscription" method="post" location="">
    <input id="updates" tyep="text" style="position: absolute; left: 760px; width: 160px; margin-top: -37px; color: #808080; z-index: 1;" disabled="disabled" value="Subscribe for Updates"/>
    <input id="subscribe" name="email" type="email" style="position: absolute; left: 760px; width: 160px; margin-top: -37px; background-color: transparent; z-index: 99999;" onclick="document.getElementById('updates').value = '';"/>
    <input name="submit" type="submit" value="Submit" style="position: absolute; left: 935px; margin-top: -39px;"/>
  </form>
</div>

I've tried commenting out the lower text field but this doesn't make any difference. I used to have this problem in IE but I haven't seen it for a long time.

[hellodipak]

<input type="email" is not supported by IE browsers. It should be type="text"

[KeredDrahcir]

I know that but if the browsers doesn't recongise the input type it defaults to text and setting as email helps iPhone users since it gives them the E-mail keyaod,

[KeredDrahcir]

The solutions is that IE doesn't like the box to have trasnparent text. I removed the back box, gave its style and value to the front box and used JavaScript to change the value when a user selected it.