Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

IE 7 bizarrely expanding text area

Avatar of cloud-9
cloud-9 asked on
CSSHTMLWeb Browsers
2 Comments1 Solution1002 ViewsLast Modified:
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>
textarea-expand.jpg
ASKER CERTIFIED SOLUTION
Avatar of scrathcyboy
scrathcyboyFlag of United States of America image

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answers