CSS bug in text input field - MSIE7

I have an input text in a form that has a problem in MSIE7. When the text field is filled and I continue typing, the background starts scrolling left along with the text.

This is the form when the text field is filled

The background image, a white rectangle with rounded corners, scrolls left with the text, leaving the black background.

This is the CSS for this text field:

  border: none;
  background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat; 
  width: 100px; 
  heig开发者_C百科ht: 20px; 
  padding: 0px; 
  font-size: 80%;  
  color: #399;  
  display:inline;

Is there any way to solve this in MSIE7?

input{overflow:hidden;}

Don't know if this will work.

I think you have a problem with this line.

background: url('/wp-content/themes/pokerbuddy/images/field.png') top left no-repeat;

Don't you mean

`background: url('/wp-content/themes/pokerbuddy/images/field.png') top left repeat-x;`

Yes, there is a way to solve this, but it's a bit of a pain. You shouldn't put the textfield in the same div with the background image. It should be more like this (example of HTML structure):

<div style="background-image: url('/wp-content/themes/pokerbuddy/images/field.png');>

<div class="textboxStylesHere" style="(specify width, maybe overflow hidden)">
</div>

</div>

Pain, but it works.