Geek Answers Handbook

CSS: how to set the width of the form control so that they all have the same width?

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>

In a browser that supports the border-box window size, this displays the way I want:

Fix rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

In IE 6/7, however, this appears as:

rendering IE 6/7 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 pixel sizing?

+6
css internet-explorer border-box
source share
4 answers

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 the HTML header:

 <!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->
+1
source share

The solution is to use CSS and JavaScript to replace the form controls that browser developers have conspired to make style pain. The selection is just a drop-down menu with the onmouseup event. JS-driven text editors (rich and simple) that can replace the text environment on the Internet. There are even libs for this purpose. ( Example )

+2
source share

A quick fix can be in IE6 / 7 - hack it with something like select { *width:102.5%; _width:102.5%; } select { *width:102.5%; _width:102.5%; } select { *width:102.5%; _width:102.5%; } , although this may not coincide with the pixel if it is too large.

+1
source share

Perhaps this may help you: CSS3 support for Internet Explorer 6, 7, and 8 . On the page:

IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the new CSS3 standard.

0
source share

More articles:


All Articles