Fix IE7 scrolling background problem in textarea form fields

Fix IE7 scrolling background problem in textarea form fields

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

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.

[code='css']
#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;
}
[/code]

contact-form

About reADactor

Try to be a mixer of inspiration, source of tutorials, tips and a reactor of your future design ideas, a place from where you can download freebies, vectors and web templates. Follow us on Twitter and Facebook

View all posts

Network News

Feedbox

Share this!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
  1. January 23, 2010 at 1:40 pm

    What a great resource!

  2. uberVU - social comments

  3. Fix IE7 scrolling background problem in textarea form fields … | Drakz Free Online Service

  4. You are now listed on FAQPAL

  5. Tweets that mention Fix IE7 scrolling background problem in textarea form fields | reADactor -- Topsy.com

  6. tripwire magazine | tripwire magazine

  7. 40+ New Community Posts for Web Designers and Developers | Afif Fattouh - Web Specialist

  8. This Weeks Twitter Design News Roundup N.21 - Speckyboy Design Magazine

  9. bug
    February 11, 2010 at 5:58 pm

    Not much use unless the textarea has a solid background colour. No real solution for a gradient colour.

    • reADactor
      February 11, 2010 at 9:52 pm

      your comment can be useful if you read the articol first. the textarea have no background at all.

  10. March 15, 2010 at 8:11 am

    It’s really a good solution and I am in need of it for my present project thanks for this solution.

    • reADactor
      March 16, 2010 at 7:55 am

      welcome

  11. April 22, 2010 at 9:27 pm

    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!

    • reADactor
      April 22, 2010 at 10:04 pm

      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.

  12. May 6, 2010 at 7:58 pm

    great post as usual!

  13. May 16, 2010 at 1:40 pm

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

  14. August 11, 2010 at 9:29 pm

    MY IE is so buggy..this might help me..thanks

    • August 27, 2010 at 9:45 am

      Its not only your IE, The whole Micro$oft is totally corrupt. they really made developers sick. its our nightmares with this bullshit browser!

      • reADactor
        August 27, 2010 at 9:47 am

        maybe with IE9 the things will be different.

        • August 28, 2010 at 7:57 am

          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!

    • August 27, 2010 at 9:46 am

      I hope to see the day the Micro$oft gone down.

  15. September 25, 2010 at 10:38 am

    Thanks mate , it solved my scrolling problem and other ie bugs also .
    Regards, A.k

  16. September 28, 2010 at 3:40 pm

    Merci, bravo et respect.

  17. November 4, 2010 at 3:14 am

    good job! thnks for sharing

  18. June 14, 2011 at 11:12 pm

    Dear IE:

    Please Please Die.

    Thanks,

    I was trying to avoid this solution but I guess I have no choice >.<

  19. Andreas
    October 21, 2011 at 1:00 pm

    Thanks for the tip, now it works with some horrible code:
    http://pastebin.com/kr8EFi4T

  20. December 21, 2011 at 2:27 am

    I tried and it works thanks for sharing.

  21. February 17, 2012 at 2:11 am

    hm.. i did not agree with some of the things, nevertheless i do appreciated the post in general… the post was actually recommended to me by a buddy at digg and she was right. quite good read! Regards, Flyg Till Gotland

  22. March 17, 2012 at 4:16 am

    Wow, awesome blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is fantastic, as well as the content!. Thanks For Your article about Fix IE7 scrolling background problem in textarea form fields | reADactor .

  23. Ulrat
    March 17, 2012 at 8:08 pm

    Whats so special about this sites layout? I agree that the content is good and useful, but I am not loving the layout or color scheme of this site. Apart from that — Great Site – keep up the great work.

  24. April 4, 2012 at 5:39 am

    I like the valuable info you provide in your articles. I will bookmark your blog and test again here frequently. I am rather sure I’ll learn many new stuff right here! Best of luck for the following!

Leave a reply

*

*

Your email address will not be published. Required fields are marked *