I have a form where i have set a background image to the text input field.

 

Its works fine in firefox, however when you fill the space in IE the background image just scrolls horizontally.

 

Has anyone ever experienced this and has a solution to fixing it?

 

Heres my css and html.

 

.form_title input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 58px;
height:19px;
background-image: url(../images/form_title.jpg);
background-repeat: no-repeat;
border: 0px;
margin:0px;
padding:3px 3px 2px 2px;

}

 

	<p class="form_title">
		<input name="Title" size="10" type="text" /> 
</p>

I have a form where i have set a background image to the text input field.

 

Its works fine in firefox, however when you fill the space in IE the background image just scrolls horizontally.

 

Has anyone ever experienced this and has a solution to fixing it?

 

Heres my css and html.

 

.form_title input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 58px;
height:19px;
background-image: url(../images/form_title.jpg);
background-repeat: no-repeat;
border: 0px;
margin:0px;
padding:3px 3px 2px 2px;

}

 

	<p class="form_title">
		<input name="Title" size="10" type="text" /> 
</p>

Try:

 

.form_title input[type=text]{
}

 

I wouldn't use it at all if I was you as the majority of browsers won't parse css2