I have struggled really hard to find an answer to the following question but I always end up with rookie answers or suggestions to switch browser. However Im confident that there is a good solution to this problem so I turn to you.
My question is simple: How do I create a text filed which is 100% wide in strict mode.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body style="margin: 0;">
<input type="text" style="width: 100%;" />
</body>
</html>
The problem here obviously is the box-model that adds the border and padding of the text field to the width, so 100% + 6px in the case of IE. A workaround that works for Firefox, Opera and Safari is to change the box-model.
input {
box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
}
The problem with this approach is that it doesnt work in IE 6+ (I dont care about IE < 6). My solution so far has been to extend
http://webfx.eae.net/dhtml/boxsizing/boxsizing.html to handle 100% but its very hard to get right, especially if you have many inputs on your page. Another solution is to switch to quirks mode but thats not an option.
There must be a good solution for this VERY simple problem.
Please help.
Start Free Trial
