Products
Technologies
A–C
D–H
I–Z
Developer services
Project centers
Developer resources
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Scrolling Backgrounds in Input & Textarea Fields
Problem
IE6-7 incorectly scrolls an applied element background with background-attachment: scroll; when the user scrolls a textarea field or overflows an input field. This is incorrect behavior as the element background should only scroll with regards to the viewport.
Solution
No known solution or workaround, however this is only visible when the input element background consists of a pattern or an image.
Detailed description
A background image can be applied to an input or text element as shown:
/*CSS*/IE7 incorrectly scrolls the background of a text input or a textarea when overflow is entered or when the attached scrollbar component is used.
input[type=text], input[type=password], textarea {
background-image: url('pattern_or_image.gif');
background-attachment: scroll; /* Note that this is the default value, and that using 'fixed' will not work as this ironically fixes the background to the viewport. */
overflow: scroll;
}
The CSS2.1 specification states (from http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment):
"If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with the element, and a 'scroll' background doesn't move with the scrolling mechanism."See the attached image for a demonstration.
Text ID: SCROLLING_INPUT_BACKGROUNDS_IE7
Comments (1)
To add a comment, please Log in.
Input Field Background Image Scrolling in IE 7 only
by Tyler Lange on November 7, 2008
I am having trouble getting it to work in IE 7.
/* Input Styles */
.skinField {
padding: 2px 0 0 0;
margin: 5px 0 0 0;
width: 172px;
height: 22px;
float: left;
text-indent: 11px;
color: #333;
border: 0;
background: transparent url('../images/bg/home_form_field.gif') no-repeat top right;
_background-attachment: fixed;
*background-position: top left; /* For IE 7 scrolling */
}
Tyler Lange
www.epochwebdesign.com
www.needforspeed.com
www.ea.com