Centering multi line Text in IE html textarea tag

jasv
jasv used Ask the Experts™
on
I am looking for a solution to an annoying problem that seems to only exist in IE. If I have the attached simple html with a single textarea and a style to center the code. If use firefox and I enter the following 2 lines with a carriage return after line one I get the following centered properly
2x2
3x3

If I enter the same 2 lines in IE I get the lines not aligned on top of each other
2x2
 3x3

I've tried some quick and dirty javascript code to fix it with the onkeyup event but have not fixed it. Anyone have a way to fix it so that it is transparent to the user?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
textarea {
    text-align:center;
 }
</style>
</head>
<body>

<div>
<textarea id="box1" row="40" cols="10" </textarea>
</div>
</body>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
line number 16 is a typo?
<textarea id="box1" row="40" cols="10" </textarea>

should be
<textarea id="box1" row="40" cols="10"></textarea>


Author

Commented:
I cut and pasted the html and did a poor job of it. The problem persists regardless.
try this
<textarea id="box1" row="40" cols="10" align="center"></textarea>
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
the
<textarea id="box1" row="40" cols="10" align="center"></textarea>

did not center the text at all. It went to left justified.
check this link
http://www.webxpertz.net/forums/showthread.php?t=7780

It seems you need to define the width and height before using the text-align

Please check and let me know if it worked

Author

Commented:
The same issue persists. The 2nd line is slightly off center. I am really surprised that others haven't come accross this before.  The IE still shows

2x2
  3x3  
where firefox shows it correctly aligned like
2x2
3x3
Top Expert 2010
Commented:
Here You go, put this in css.

Regards


textarea {
    text-align:center;
	white-space: pre;
 }

Open in new window

Author

Commented:
Thank you. I can relax this weekend.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial