Link to home
Start Free TrialLog in
Avatar of cloud-9
cloud-9

asked on

IE 7 bizarrely expanding text area

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
ASKER CERTIFIED SOLUTION
Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of cloud-9
cloud-9

ASKER

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.