I'm encountering an issue with a textarea (and potentially any input element) appearing too wide when the width is set to 100%. Below is my CSS code.
Firstly, I am 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;
}
Next step involves applying styles 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;
}
Lastly, here is my HTML code.
<form method="post">
<fieldset>
<label for="area">Content</label>
<textarea id="area" name="area"></textarea>
</fieldset>
</form>
Upon testing in Chrome and Firefox (other browsers pending), the textarea appears properly padded by 5px on the left, but on the right side it either aligns flush with the fieldset or slightly overflows.
An interesting observation is that everything displays correctly when I remove the doctype from the page.