IE form unavailable with transparent background

[kwight]

Hello,

I have a page with a password field. Because it is a custom graphic, I am using a div above the graphic to contain the form and input (which has a transparent background to show the graphic below). The only other div contains the whole page for centering in the browser window. This works is FF, but not in IE. If I use any color other than transparent, IE works as expected. IE seems to require a solid background color for the cursor to detect it and allow the user to click in to the field.

Is there any way to get a transparent background working with IE? Thank you...

<div id="base">
<div><form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input id="field" type="password" size="8" maxlength="8" title="Enter your password" name="txtPassword" />
</form>
</div>

#base {
position: relative;
width: 1108px;
margin: auto;
}
#field {
position: absolute;
top: 133px;
left: 994px;
background-color: transparent;
border-color: transparent;
}

[bzgzd]

For me it works in IE 8.

In IE 7 there is problem.
I can click there and enter password but I have to click on the edges of that field.

Text cursor ("I") is not properly displayed when I am over that field it displays text cursor only on edges but after I click there cursor is correct and I can input password. (Same problem in ie6, plus that in ie6 input field edges are not transparent)

What can help is setting normal background for ie7 and make it transparent using ie opacity filter like this:

<!--[if lte IE 7]>
<style type="text/css">
input#field
{
background: white;
filter:alpha(opacity=0);
}
</style>
<![endif]-->

or next idea can be somehow using transparent image and z-index inside...