Forum Moderators: open
<input type="text" name="X" style="width:100px"><select name="Y" style="width:100px">
<option value="A">A</option>
</select><textarea name="W" cols="15" rows="3" style="width:100px"></textarea>Everything works well when there is no DTD specified, or with HTML4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">However, if I add the URI to the doctype, both IE and Firefox (on Win XP) add 4px to the text box and textarea (not to the select box):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Am I doing something incorrectly?
In your CSS, add * {margin:0;padding:0;} and see if the problem goes away.
adding a doctype makes my navigation section disappear [webmasterworld.com]
and
Doctype for mongrel site [webmasterworld.com]
See also Quirks Mode vs. Standards Mode - overview [webmasterworld.com]
[edited by: Receptional_Andy at 3:53 pm (utc) on Feb. 20, 2006]
Here is the full code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;">
<title>Test</title>
<style type="text/css">
body, input, select, textarea {
font-family: Arial;
font-size: 11px;
}
.form1 {
width: 150px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" name="X" class="form1"><br>
<select name="Y" class="form1">
<option value="A">A</option>
</select><br>
<textarea name="W" cols="15" rows="3" class="form1"></textarea><br>
</body>
</html>
Kaled.
If I understand it correctly, you are getting 4px added to the width? If so, this is normal as in standards mode the borders are outside the box, not inside. You simply need to adjust your width in consequence so that the total width equals 100px.
[www-128.ibm.com...]
IE will revert to quirks mode. This is a deliberate design feature documented by MS.Makes me laugh.
If I understand it correctly, you are getting 4px added to the width?
