Menu
Consider the following 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"/>
<style type="text/css">
div { width: 15em }
input, textarea, select { width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
</style>
</head>
<body>
<form>
<div>
<input value="Input">
</div>
<div>
<textarea>Text area</textarea>
</div>
<div>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</form>
</body>
</html>
On browser that support the border-box box sizing, this is rendered as I want:
Correct rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png
On IE 6/7, however, this is rendered as:
IE 6/7 rendering http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png
How can I get the same rendering in IE 6/7 that I get in other browsers, without resorting to setting sizes in pixels?
799
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
The solution is to use CSS and JavaScript to replace form controls that browser vendors have conspired to make a pain to style. A select is just a drop down menu with an onmouseup event. JS-driven text editors (rich and simple) which can replace a textarea abound online. There are even libs just for this purpose. (Example)
107
This is not possible with CSS. I did some research and I found out that the same question was asked before here. The solution is to use this boxsizing.htc file and add the following line to your HTML head:
<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
