asked on

Centering multi line Text in IE html textarea tag

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

Gurvinder Pal Singh

line number 16 is a typo?
<textarea id="box1" row="40" cols="10" </textarea>

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

jasv

ASKER

I cut and pasted the html and did a poor job of it. The problem persists regardless.

Gurvinder Pal Singh

try this
<textarea id="box1" row="40" cols="10" align="center"></textarea>

jasv

ASKER

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

did not center the text at all. It went to left justified.

Gurvinder Pal Singh

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

jasv

ASKER

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

ASKER CERTIFIED SOLUTION