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: background, css, fix, form, graphic, IE7, problem, scroll, textarea, tip, trick, tutorial

14 Comments

pharmacy tech
January 23, 2010

What a great resource!
Reply
bug
February 11, 2010

Not much use unless the textarea has a solid background colour. No real solution for a gradient colour.
Reply
- reADactor
  February 11, 2010
  
  your comment can be useful if you read the articol first. the textarea have no background at all.
  Reply
Cubism Designs
March 15, 2010

It’s really a good solution and I am in need of it for my present project thanks for this solution.
Reply
- reADactor
  March 16, 2010
  
  welcome
  Reply
fourtyone
April 22, 2010

the question is, who at microsoft thought it would be a good idea to make the background image scroll in the first place? haha

thanks for the help!
Reply
- reADactor
  April 22, 2010
  
  when is talk about IE, is like you enter in crepuscular zone. IE for instance is more then Bruce Willis. Nothing die so hard then old versions of IE.
  Reply
TomPier
May 6, 2010

great post as usual!
Reply
Andy Reid
May 16, 2010

Nice post. But, to quote above, “No real solution for a gradient colour.” I too am looking for something helpful in the gradient area.
Reply
pharmacist tech
August 11, 2010

MY IE is so buggy..this might help me..thanks
Reply
- Bobs
  August 27, 2010
  
  Its not only your IE, The whole Micro$oft is totally corrupt. they really made developers sick. its our nightmares with this bullshit browser!
  Reply
  - reADactor
    August 27, 2010
    
    maybe with IE9 the things will be different.
    Reply
    - Bobs
      August 28, 2010
      
      somehow you are true, I follow the news regarding to the upgrades taking place on IE9. but you know if the organization is corrupt what ever they produce will have many lack… they earn billions of dollars each year but they can’t solve their biggest bugs…
      the disaster is that they accept that they are bullshitting!
      Reply
- Bobs
  August 27, 2010
  
  I hope to see the day the Micro$oft gone down.
  Reply