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;"> </div>
</div>
textarea-expand.jpg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER