PDA

Click to See Complete Forum and Search --> : textarea ... background-color:transparent causing problem in IE7

dsdsdsdsd
03-13-2010, 07:56 AM
hello;


when I use <textarea style="background-color:transparent " > IE7 does not accept input ... other browsers work fine;


is there a way to get a transparent background for a textarea such that the textarea functions correctly in IE7 ( I haven't tested it in IE8 )?



thanks,

Shannon
tirna
03-13-2010, 06:20 PM
as a workaround for IE7 maybe try wrapping the <textarea> in a <div> with a background-color:transparent and then set the

textarea background-color to 'inherit'.

This should hopefully force the textarea to use the background-color of its parent element. I haven't tested it though.

<textarea style="background-color:transparent " > works ok in IE8
dsdsdsdsd
03-14-2010, 03:39 AM
Tirna, thanks for your response;

I am getting some different results from you ... my IE8 ( vista ) behaves the same as my IE7 ( xp ) ... when the backgrounds are transparent the textareas do not accept input;

I tried the div wrapper approach ... oddly my IE7 did not recognize the background-color : inherit, but Mozilla3.5 did;

for now I will use a browser sniff and disable the effect on IE's;

thanks for your time.
tirna
03-14-2010, 03:52 AM
no problem.

For what it's worth below is the html I used to test textarea transparency in IE8.

I am running IE8 on Windows Vista Home Premium.

As it is, you will get a green textarea with white verical scroll bar.

I haven't tested it on IE7 which is on my laptop.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
body {
background-color: green}
textarea {
background-color: transparent }
</style>
</head>
<body>
<textarea cols="20" rows="10"></textarea>
</body>
</html>
dsdsdsdsd
03-14-2010, 06:47 AM
odd .. this works fine ... I need to figure out why this is working and mine is not ... thanks for your time ... Shannon
dsdsdsdsd
03-14-2010, 09:13 AM
seems that if I am very careful and mouseclick the border of the textarea, that the textarea WILL receive focus ( IE7 ) ... which means that it is willing to work.

so I set my textarea with a bunch of whitespace ( colsXrows characters of it ) and now it receives focus, but of course I have to strip all the whitespace before a user can submit; plus this is very hackey;
dsdsdsdsd
03-15-2010, 10:07 AM
another better hack is to place a mousedown handler on a wrapper div ( that wraps the textarea ), and have it set focus on the textarea via .focus() method;