Fix IE7 scrolling background problem in textarea form fields

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.

form-IE7-problem

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.

fix-IE7-textarea

Join testking 642-681 training to become an expert web designer using testking 646-046 tutorials and testking 642-533 web designs for practice.


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;
}

contact-form

Published on: January 23rd in Tutorials .
Post tags: , , , , , , , , , , ,

14 Comments

  • pharmacy tech
    January 23, 2010
  • bug
    February 11, 2010
    • reADactor
      February 11, 2010
  • Cubism Designs
    March 15, 2010
    • reADactor
      March 16, 2010
  • fourtyone
    April 22, 2010
    • reADactor
      April 22, 2010
  • TomPier
    May 6, 2010
  • Andy Reid
    May 16, 2010
  • pharmacist tech
    August 11, 2010
    • Bobs
      August 27, 2010
      • reADactor
        August 27, 2010
        • Bobs
          August 28, 2010
    • Bobs
      August 27, 2010

Leave A Comment.