mellowsoon mellowsoon - 7 months ago 20
HTML Question

Textarea At 100% Width Overflows Parent Container

I'm having a problem with a textarea (and possibly any input element) being displayed too wide if the width is set to 100%. Here is my CSS.

First, I'm resetting all styles.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


Then applying styling to my form.

form fieldset {
border: none;
border: 1px solid #ff0000;
padding: 5px;
}
form fieldset legend {
font-size: 20px;
font-weight: bold;
}
form textarea {
width: 100%;
height: 500px;
}


And finally my HTML.

<form method="post">
<fieldset>
<label for="area">Content</label>
<textarea id="area" name="area"></textarea>
</fieldset>
</form>


In Chrome and Firefox (Haven't tested others yet), the textarea is properly padded 5px on the left, but on the right the textarea is either flush with the fieldset, or overflowing just a bit.

One thing of interest, is everything displays correctly if I remove the doctype from the page.

Answer

Reset also the textarea, I don't see it at your reset CSS.

Probably it is inheriting some margin.