I've been trying to search for a fix to this problem and I'm rapidly thinking I might have to quit!!

I'm creating a website for a client that has a contact form included. The Client wants the form to be a little more than just the standard form elements so I have made the elements transparent and placed background images behind them. This is working successfully in IE6, Firefox, Netscape and partially (except for a boundary box when the element has focus) in Safari. But IE7 is still causing problems.

Heres the CSS for the textfield element.

.textfield {
    font:1.1em Verdana, Arial, Helvetica, sans-serif;
    color:#333;
    margin:3px;
    height:20px;
    border:solid 0 #fff;
    padding: 3px 8px;
    background: transparent url("Graphics/textfield_bg.gif") no-repeat fixed;
    width:200px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:187px;
}
fieldset>input.textfield {
    background: transparent url("Graphics/textfield_bg.gif") no-repeat;
}

IE6 etc Reads the first option and sure enough the background is in place, the other browsers read the Fieldset>input.textfield and this also works fine.... however... IE7 now also reads the Fieldset>input.textfield and shows the backgrounds behind the elements.

In FF etc when you enter text into the text box the background stays fixed in place when the text overflows the box.

In IE7 the background scrolls off the the left as you overflow the textbox.

If I add fixed to the Fieldset>input.textfield the backgrounds get fixed to the top left of the browser window and thus don't show.

If anyone can give me an idea how to hack this I would greatly appreciate it!! Otherwise I think boring form elements will be the order of the day for IE7, which seems a bit of a let down!

Regards

Peter Mc