IE 7 bizarrely expanding text area

cloud-9
cloud-9 used Ask the Experts™
on
To add posts to a forum I have created for one of my projects, I made a text editor that uses a textarea. The problem is that, when you focus, type in the text area, or blur the text area, it expands to the right geting about 60 - 80 px larger. Whenever you hover over the tabs I have at the bottom or some of the control buttons, it shrinks back to its proper size. I have never seen this before and it only occurs in IE 7. I've run into similar issues in IE8 where inputs randomly change sizes.


/*THIS IS THE CSS*/

#editor {
	background: #4a4a4a;
	padding: 10px 15%;
}
#editor input {
	padding: 4px;
	font-size: 1.6em;
	border: 1px #1a1a1a solid;
	color: #800;
	width: 100%;
	float: left;
	margin: 4px 15% 4px 0;
}
#editor textarea {
	float: left;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	padding: 4px;
	font: 1.3em Verdana,Helvitica;
	color: #800;
	zoom: 1;
	border: 1px #1a1a1a solid;
	height: 160px;
	margin: 4px 15% 4px 0;
}
#text_control {
	height: 25px;
	float: left;
	width: 100%;
	border: 1px #800 solid;
	padding: 4px;
	background: #c00 url('backgrounds/text_control.png') repeat-x;
	margin: 4px 0 -5px 0;
}
.pa {
	float: left;
	background: #222 url('backgrounds/user_tab_bg.png') repeat-x;
	text-align: center;
	margin-bottom: 2px;
	cursor: default;
	border-right: 1px #111 solid;
	position: relative;
	width: 25px;
}
.pa:hover {
	background: #444 url('backgrounds/user_tab_bg-hover.png') repeat-x;
}
.text_btn {
	height: 25px;
	font-size: 15px;
}
.img_btn {
	padding-top: 4px;
	height: 21px;
}
#row_l_end {
	position: absolute;
	top: 0;
	left: -7px;
}
#row_r_end {
	position: absolute;
	top: 0;
	right: -7px;
}
#row_drop {
	position:absolute;
	top: 0;
	right: -13px;
	padding-left: 26px;
}
/*AND HERE IS THE HTML OF THE EDITOR*/
/*(ECHOED BY PHP)*/
<div id="editor">
									<form action="{$_SERVER['PHP_SELF']}?pid=ft{$topic_id}n" method="post">
{$errors}
<input type="text" value="{$new['title']}" name="new_title" id="new_title"/>
<div id="text_control">
	<div class="pa text_btn" style="border-left: 1px #111 solid; margin-left:8px; font-size: 16px;padding-top: 1px;height: 24px">
	<span id="color" style="border-bottom: 3px #e6e6e6 solid; padding: 0 3px">A</span>
	<img src="styles/images/btn_row_l_end.png" id="row_l_end" alt=""/>
	<div id="chooser"></div>
</div>
<div class="pa img_btn"><img src="styles/images/w_bold.png" height="17px" alt="Bold"/></div>
<div class="pa img_btn"><img src="styles/images/w_italic.png" height="17px" alt="Italic"/></div>
<div class="pa img_btn"><img src="styles/images/w_underline.png" height="17px" alt="Underline"/></div>
<div class="pa img_btn"><img src="styles/images/strike.png" height="17px" alt="Strikethrough"/></div>
<div class="pa text_btn"><sup>sup</sup></div>
<div class="pa text_btn" style="padding-top: 10px;height: 15px;margin-right:8px"><sub>sub</sub><img src="styles/images/btn_row_r_end.png" id="row_r_end" alt=""/></div>
<div class="pa img_btn" style="border-left: 1px #111 solid; margin-left:8px">
<img src="styles/images/w_link.png" height="17px" alt="Insert a Hyperlink"/>
<img src="styles/images/btn_row_l_end.png" id="row_l_end" alt=""/>
</div>
<div class="pa img_btn"><img src="styles/images/w_image.png" height="17px" alt="Insert an Image"/></div>
<div class="pa img_btn"><img src="styles/images/quote.png" height="17px" alt="Insert a Quote"/></div>
<div class="pa img_btn"><img src="styles/images/w_ul.png" height="17px" alt="Insert an Unordered List"/></div>
<div class="pa img_btn"><img src="styles/images/w_ol.png" height="17px" alt="Insert an Ordered"/></div>
<div class="pa img_btn" style="border-right: 1px #333 solid">
<img src="styles/images/btn_row_drop.png" id="row_drop" alt="" name="imgSwap-styles/images"/>
<img src="styles/images/smilie.png" height="17px" alt="Insert a Smilie"/>
<div id="smileys"></div>
</div>
<img src="styles/images/w_contract.png" alt="Contract" title="Contract text area" id="contract" class="size"/>
<img src="styles/images/w_expand.png" alt="Expand" title="Expand text area" id="expand" class="size"/>
</div>
<textarea name="new_body">{$new['body']}</textarea>
<a class="action_tab" id="post_submit">Post</a>
<a class="action_tab">Preview</a>
<a class="action_tab" href="base.php?pid=ft{$topic_id}p01">Cancel</a>
</form>
<div style="clear: both; height: 0;">&nbsp;</div>
</div>

Open in new window

textarea-expand.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You need to get rid of the 100%s here and give the textarea a FIXED size in pixels --

#editor textarea {
      float: left;
      width: 100%;
      max-width: 100%;
      min-width: 100%;

If you set it to 100%, it WILL change size on focus and defocus, because a text area was designed to be a specific width, and IE7 is probably doing exactly what you ask -- to expand the textarea on focus.

Author

Commented:
I was hoping not to have to use javascript, but I guess it was unavoidable. I simply set the width of the textarea to width of the editor bar and subtracted 10.

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