TextArea expend over 100% at Strict Mode

Hello guys, i’ve been trying for the past 2 days to google for textarea sizing under strict mode.
i have found no solution and at the moment my problem is this…
here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.style1 {
	text-align: center;
	width: 800px;
}
</style>
</head>
<body>
<div class="style1" style="padding: 0px; margin: 10px auto 10px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000; width: 800px;">Little Bunny</div>
<div class="style1" style="margin: 0px auto 0px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000;">
	<div style="width: 400px; float: left; background-color:#EBEDF3; height: 100px; text-align: center; line-height: 100px;">Text</div>
	<div style="width: 400px; overflow:visible; float: left; background-color:#F2F9E8" id="OuterDiv">
		<form method="post">
			<textarea cols="0" id="T1" name="TextArea1" rows="3" style="float:left; width:100%; height:100px; margin: 5px; padding:0">efefefefefef</textarea>
		</form>
	</div>
</div>
</body>
</html>

The Textarea expend over the surrounding Div and it shows differntly under FireFox 3.5.7 and IE 8 (tested for both)

I’m trying to do the following:
make the textarea width 100% and height 100px for example. + padding 5px outside the textarea (space 5px from left, right, top, bottom)…
most importent thing is to see it equaly under both ff and ie…

hope you can correct my code since i’m clueless…
have a nice day

Hi, I’m not quite sure on the issue, but when you give percentage widths it’s based upon the parent, so the textbox getting 100% width would equate to 400px width. You also give 10px extra total margins thus its 100%+10px.

Ah, I think I understand, the textbox getting a bit cut off? Here is how you can work around that :). Actually…I’m just wondering, you set a fixed pixel width on the outer parent of 800px, is it not feasible to just manually set the width?

textarea{width:390px;}

That’s a generic thing so you would want to get a class on the textarea (along with the other elements in the page) to make it easier to maintain.

The parent width is 400px, but minus 10px total (5 each side) from the margins you set on it. If this isn’t possible since the fixed width was just an example shout :slight_smile:

look at this code which has no doctype and it contains a table 400px width:


<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div align="center">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="400" id="AutoNumber1" bgcolor="#E6E6E6">
    <tr>
      <td width="100%" style="padding: 5px">
		<textarea cols="0" id="T1" name="TextArea1" rows="3" style="width:100%; height:100px; margin: 0px">efefefefefe</textarea>
	  </td>
    </tr>
  </table>
</div>
</body>
</html>

inside the table you have a textarea of 100% width and padding 5px in the cell itself.
it looks fixed and beautiful
i’m trying to do that only with divs (instead of tables) and strict mode…
can you correct my original code so it would be ie and ff compatible?

Did you mean something like this?


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
form {
    width: 476px;
    border: 2px solid red;
    padding:0 12px;
    overflow:hidden;
    background:#eee;
    margin:auto;
}
textarea {
    border: 2px solid green;
    padding: 5px;
    width:100&#37;;
    margin:5px 0 5px -7px;
    float:left;
}
</style>
</head>
<body>
<form>
    <div>
        <textarea>test</textarea>
    </div>
</form>
</body>
</html>


exacly like this !
all i need is to implement it on my own code (the one i posted above) and i fail to do so…
would be appreciate if you could correct my code and please tell me how did you make it work ?!
your fix is amazing… i haven’t found any solution for this all over google
please try implement it on my code and if possible, explaion ± how did it come up so… preciesed…?
thanks!

All Paul did was give padding on the parent to soak up the padding/borders (horizontal) on the textarea, and then bring the text area back into place with a negative left margin.

Your setup is a bit different considering it’s part of a floated column, do you just want Pauls code to be in the single column? Like just the textarea be 100% width of w/e the column width is? Sorry for my poor explanation of what I think yo uwant lol

ok - I assume you mean the code from post #1. Give me 5 minutes.

whatever Paul did was putting the textarea in the middle (vertically and horizentally) and having 5px padding outside of textarea.
if you look at my code, u’ll see my textarea expend and the margin outside of it… = **** =\
if you (and him) could correct my code so textarea will fit with margin 5px outside + textarea will have a border… man… you did my day.
yes, i need it to fit to the floating column… that’s the all point.
either way, i saw the -7px and never saw anything like it…
if possible, can i get explain on why -7 and not +7/8/10… and so on…
how did it come up so precise and what is the total width and height count (what should we take into consideration so it would come out perfectly)
thanks again!

Hi,

Something roughly like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
form {
    margin:0;
    padding:0
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.pic {
    text-align: center;
    width: 800px;
    padding: 0;
    margin: 10px auto 10px auto;
    background-color: #D6EBF5;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    color: #000000;
}
.wrap {
    margin: auto;
    background-color: #D6EBF5;
    font-size: 10pt;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    text-align: center;
    width: 800px;
}
.left {
    width: 400px;
    float: left;
    background-color:#EBEDF3;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.right {
    width: 376px;
    overflow:hidden;
    padding:0 12px;
    float: left;
    background-color:#F2F9E8;
}
.right textarea{
    padding: 5px;
    width:100&#37;;
    margin:5px 0 5px -7px;
    float:left;
    height:78px
}

</style>
</head>
<body>
<div class="pic">Little Bunny</div>
<div class="wrap">
    <div class="left">Text</div>
    <div class="right">
        <form method="post" action="">
            <div>
                <textarea cols="0" id="T1" name="TextArea1" rows="3" >efefefefefef</textarea>
            </div>
        </form>
    </div>
</div>
</body>
</html>


I couldn’t work with inline styling so I added classes instead.

I’m not sure why you couldn’t have just set the exact width for the textarea that you wanted as you seem to have a fixed width container in place.

Anyway, the example I gave works no matter what size the parent is. It works as Ryan said by adding padding to the parent and then giving the textarea 100% width and then dragging it back over the padding with a negative margin.

If you give the textarea 100% width then it will be 100% wide + 2 x 2px for borders + padding.

Therefore if you want 5px padding in the textarea you need to account for: 100% + 5px + 5px + 2px + 2px.

if you want say 5px margins on the textarea then you need to add another 10px into the mix.

= 100% + 5 + 5 + 5 + 5 + 2 + 2 = 100% + 24px;

I added 24px padding (12px padding each side) to the parent of the textarea and then dragged the textarea back into the parent’s padding by 7px so that it can all fit and leave a 5px margin.:slight_smile:

can you explain please this parts:
overflow:hidden;
padding:0 12px;
the 12px is left: 12px and right:12px ?

thanks for solution

overflow used in that instance will just hide hte overflow and force it to be constrained to that width.
padding:0 12px means 0px vertical padding (top/bottom) and 12px horizontal (left/right)

i thank you all for your help and effort
you’ve saved the day!
:slight_smile:
thanks you thank you thank you !!!