Input fields show different widths on two different servers in IE
Problem
You have a form with input fields. Testing on your local server is perfect. But as soon as you upload your code to another server you find that the form breaks because the input field length is different. This happens only in Internet Explorer, IE6 and IE7.
To investigate the problem I used the following code which I had boiled down to the bare minimum to eliminate any side effects there might be:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
The result was a 9 pixel difference in the input field length - using the same browser and the same source code! It was just running on a different server.
Solution
This problem is an Apache configuration issue. Verify the following setting in the server's httpd.conf file and synchronise as necessary across your servers (if possible):
AddDefaultCharset UTF-8
Discussion
This was the most amazing bug I ever came across while developing websites. All versions of Internet Explorer I tested rendered the input field's length differently (IE7, IE6, IE5.5; IE5.01 crashed).
I discovered the cause of the problem while recreating the browser communication in a command window using these commands (you might have to write blindly since Windows hides lines two and three):
telnet [full.host.name] 80 [return] GET /full/path/to/document.html HTTP/1.1 [return] Host: full.host.name [return] [return]
This delivers the following output for both servers:
Apart from the authentification on the production server the only difference is the character set configured on these servers. This was my only hook, so I opened http.conf and synchronised both entries for the 'AddDefaultCharset' option to the same value and the problem was solved.
Standards-compliant browsers don't see this problem at all. I've tested the code in the following browsers as well and all rendered the form field exactly the same:
- Safari 3 (PC)
- Firefox 2
- Opera 9
Not all combinations between server and document character set settings work as you can see from the following table.
| Productive server charset (AddDefaultCharset) | Development server charset (AddDefaultCharset) | HTML document charset (meta) | Input field lengths are... |
|---|---|---|---|
| not set | not set | not set | same |
| not set | not set | UTF-8 | same |
| not set | not set | ISO-8859-1 | same |
| not set | UTF-8 | not set | different |
| not set | UTF-8 | UTF-8 | same |
| not set | UTF-8 | ISO-8859-1 | different |
| not set | ISO-8859-1 | not set | same |
| not set | ISO-8859-1 | UTF-8 | different |
| not set | ISO-8859-1 | ISO-8859-1 | same |
There seems to be no pattern in when Internet Explorer renders the input field differently. The only sure way is to synchronise the server configuration.