Given the following HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='iso-8859-1' />
<title>Test</title>
<style>
#IssuesListFieldSet {
width: 52em;
padding: 0;
margin: 0;
}
#IssuesList_result {
width: 52em;
padding: 0;
margin: 0;
border: 1px solid red;
}
#IssuesList_result_html {
width: 52em;
height: 100px;
display: block;
padding: 0;
margin: 0;
border: 2px solid cyan;
}
</style>
</head>
<body>
<form action='#' method='post'>
<fieldset id="IssuesListFieldSet">
<legend>Issues:</legend>
<div id="IssuesList_result">
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
</div>
<textarea readonly id='IssuesList_result_html' cols='20' height='5'>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</textarea>
</fieldset>
</form>
</body>
</html>
How do I get the textarea to be the same width as the div right above it? I’m trying to set each of the elements to roughly the same width, which for now is 52 em, but the textarea is rendering narrower than that. I understand that rendering engine minutiae can throw things off by a few pixels, but the difference here is much more than that (maybe 40% too small).
I’m testing in Safari 5.
The
emmeasurement is based on the font used for the element.By default (in Firefox 3.6.x on OS X, anyways),
<textarea>elements default to amonospacefont.Make sure you have a font applied to the element, and they should match up.
Live Demo