[RESOLVED] Centering a <textarea> within a <div>??

[sophos]

This doesn't sound like it should be difficult, but I cannot get it to work. I'm trying to center a <textarea> within a <div>, but it is not working in FF or IE. Here is a little snippet. I've tried margin-left/right:auto for the div and the textarea, but neither work. The <div> is within a <td> for a table, but that shouldn't matter should it? The table and the td spans the whole outer <div> that holds them. The table is set to width:100%.

Anyway to center this textarea? Thanks!

It's wrapped in PHP, but you get the idea.


print "<tr>";
print "<td colspan=\"4\" id=\"$hextable\" style=\"display: none; \">";
print "<div id=\"$readonlytextarea\" style:\"width:100%; \">";
print "<textarea id=\"$writetext\" style='margin-left:auto; margin-right:auto; ' readonly rows='20' cols='60' ></textarea>";
print "</div>";
print "<td>";
print "<tr>";

[felgall]

You need to apply a width to the textarea within the stylesheet. The cols attribute does not get converted to a width.

[sophos]

The cols actually was working as a width attribute. I removed cols and rows and added 'width' and 'height' to the stylesheet and they essentially replaced rows and cols...but it still isn't centered within the div.

Any other ideas?

[LeeU]

Try margin-left: 50%; w/o the right margin setting.

[Quidam]

print "<div id=\"$readonlytextarea\" style="width:100%; text-align: center; ">";

[sophos]

text-align: center; -> center aligns the text within the textarea
margin-left: 50%; -> this actually works...but only FF. I hate IE.

I've been screwing with this for hours only to come to the conclusion that IE is a piece of crap...it is giving me problems with the scrollbars as well. Instead of putting up a scrollbar, it automatically expands the textarea.

Any other ideas?

[felgall]

The cols and rows attributes are mandatory for a textarea so you should not remove them from the HTML or it will invalidate the HTML. The width and height specified in the stylesheet will override them for those whose browsers support stylesheets.

Are you sure you have a valid doctype as the first thing in the page as IE goes into quirks mode where it doesn't understand how to centre things properly without it.

[Quidam]

May we have a link to your site?

What I can see is this that you have this

print "<div id=\"$readonlytextarea\" style:\"width:100%; \">";


You need to change the : to a =

Maybe you have already, I'm just pointing out. ;)

[Quidam]

I got this code to work. The textarea is centered but the text within the textarea is not.

I'm not sure what your purpose was with the style="display: none" within the <td> tag.

Anyway, I hope this is what you were looking for..


print "<tr>";
print "<td colspan='4' id='$hextable'>";
print "<div id='$readonlytext' style='width:100%; text-align: center;'>";
print "<textarea id='$writetext' style='margin-left:auto; margin-right:auto; text-align: left;' readonly='readonly' rows='20' cols='60'></textarea>";
print "</div>";
print "<td>";
print "<tr>";

[felgall]

you have specified text-align:left for the textarea. Remove that and it will inherit the text-align:center from the div

[Quidam]

Yeah, I know. He said earlier that that's how he wanted it. :p

[sophos]

Thank you, thank you! That worked. I tried each of those things individually, but never together. FYI - The display:none is for some ajax that will dynamically display the textarea. Thanks again!



print "<tr>";
print "<td colspan='4' id='$hextable'>";
print "<div id='$readonlytext' style='width:100%; text-align: center;'>";
print "<textarea id='$writetext' style='margin-left:auto; margin-right:auto; text-align: left;' readonly='readonly' rows='20' cols='60'></textarea>";
print "</div>";
print "<td>";
print "<tr>";
[/QUOTE]