Resizable textarea and CSS
libeco - October 12, 2008 - 14:19
Hi all,
I'm trying to theme a webform through CSS. Somehow I keep getting stuck with the resizable textarea. In IE7 the handle for resizing is shown but stretched out longer than the textarea itself. In ff3 the handle is half hidden under the top of the textarea. When dragging it both still perform the normal action of resizing the form but their appearance is just not good.
Here's my CSS for that piece:
div#wrapper div#main div#content div#webform_right {
width: 303px;
float: right;
text-align: left;
margin: 20px 0px 0px 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right p {
font: 0.8em Verdana, sans-serif;
letter-spacing: 0.1em;
color: #a7a9ac;
text-align: left;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form {
width: 303px;
float: left;
text-align: left;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div {
width: 303px;
margin: 2px 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div.webform-component-textfield {
width: 303px;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div.webform-component-email {
width: 303px;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item label {
width: 125px;
font: 0.7em Verdana, sans-serif;
letter-spacing: 0.1em;
color: #a7a9ac;
float: left;
text-align: right;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item label span.form-required {
display: none;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item input {
width: 175px;
float: right;
text-align: left;
margin: 0px; padding: 0px; border: 1px solid #000;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item textarea {
width: 175px;
float: right;
display:block;
text-align: left;
margin: 0px; padding: 0px; border: 1px solid #000;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item div.description {
width: 200px;
clear: both;
margin: 0px; padding: 0px; border: 0px;
}
div#wrapper div#main div#content div#webform_right form div div div.form-item div.description p {
width: 303px;
font: 0.6em Verdana, sans-serif;
letter-spacing: 0.1em;
color: #a7a9ac;
text-align: right;
margin: 0px; padding: 0px; border: 0px;
}I hope someone can help me.
Thanks in advance!