3) Dress up your textareas: rounded corners, changing background & fixed scrolling background IE bug

Adding a sprite with rounded corners to add textarea field is almost the exact same procedure as described in Dress up your text fields.

With one exception: In Internet Explorer 7 the whole background image (in our case the sprite with both states) in the textarea scrolls by when a user enters text below the specified amount of rows.

An example form without the workaround is here: IE7 textarea scrolling background bug (you have to use IE 7 to see the effect).

Create a basic textarea and apply a class (don’t worry about setting rows and cols, as we will override the settings via CSS):

The following CSS is what causes the bug in IE to appear:

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

As seen in previous posts, we are simply applying some basic CSS to our textarea: we set the border to 0 to prevent the browser from displaying it, we set the desired font style and size, etc.

By using the pseudo-class :focus which is triggered when the user clicks inside the textarea to enter text, we expect the background to change as specified in line 13. Which happens without a problem in Firefox & Safari, but not in Internet Explorer 7.

IE 7 ignores the pseudo-class :focus, but this doesn’t seem to be the problem, as ignored declarations are simply dropped. In this case, the whole sprite we’re using as background starts scrolling, from top to bottom, eventually showing the element’s actual background color.
You can see the scrolling background effect on this page (use IE 7 to access it).

A quite simple workaround is to wrap another div around the textarea and apply the initial sprite to the outer div instead of the textarea:

#txt_cont {
	height:140px;
	width:300px;
	margin-top:10px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

We’ve removed the background-image definition from the textarea, assigned the ID #txt_cont to the outer div and set the background-image of that div to the upper portion of the sprite we initially used as a background-image for the textarea. Everything else stays the same.

Tags: background-image CSS IE 6 form forms IE 7 scrolling textarea

Date posted: Monday, March 29th, 2010 at 7:11 am (14 years, 9 months ago.)
Posted in: tech mix
Comments RSS Feed
Reply
Ttrackback