Fix IE7 scrolling background problem in textarea form fields
IE6-7 incorrectly scrolls an applied element background for textarea field or overflows an input field in forms. Even the most common css hack suggested is to use the fixed position for background attachment, sometimes this isn’t enough.
The problem is screen printed above. The css background attachment property loaded like default in IE6-7 is “scroll”. For IE6 you can make the background attachment “fixed” and no more scrolling. Not so with IE7.
Since Microsoft “corrected” the background attachment issues with IE7 and now is no way of having an overflow of text in a input or textarea element and not having the background scroll with the text, and if you try “background-attachment: fixed;” the background doesn’t even display.
Because is no really css hack what fix the problem, you need to think out of css. Instead to style just the textarea element, make a supplementary div like container for textarea and apply the background image to the div, instead to textarea. Let the textarea without border and background to make a proper overlay.
#contactForm textarea {
border:none;
background:none;
width:200px;
height:85px;
color:#c8c8c8;
padding:10px 0 0 10px;
overflow:hidden;
}
#contactForm .textarea {
width:215px;
height:100px;
background: url(../images/input-text.png) no-repeat;
}
Related Posts
Post tags: background, css, fix, form, graphic, IE7, problem, scroll, textarea, tip, trick, tutorial
January 23, 2010
What a great resource!
February 11, 2010
Not much use unless the textarea has a solid background colour. No real solution for a gradient colour.
February 11, 2010
your comment can be useful if you read the articol first. the textarea have no background at all.