IE problem with form text input box width

HTML & CSS
1

Hi,

I added a form into a div in a design that took me days to get pixel perfect on all browsers (except for safari that just want stop crashing on my win XP). now the problem is this: i set the size of the text input field to ‘20’ which is just as wide as i want it to be on FF (opera and netscape output is the same as FF), but, of IE6 and IE7 the field is wider and messes up everything… i examined screen shots and found that the width of the input box on FF is 145px, and on IE 154px.

i tried setting the padding/margin of all containing divs to ‘0’ but still there is this 9px difference.

when i paste this form into a blank html document i still get this 9px difference between the two outputs.

I tried using em, and % but it didn’t help.

googling for a solution I came across this page:
http://www.creativespirits.com.au/treasurechest/input-fields-have-different-widths-in-IE.html
its a slightly different problem, but there is a 9px difference as well which makes it somewhat suspicious…

so I’m at loss here as to even where i should be looking for my answer…

:headbang:

2

Your site is showing 2 HTML validation errors, though there are more (if you’re using FIELDSET, you should also use LEGEND as well).

Try fixing them and then check your stylesheet for errors.

Also, if you haven’t done so yet, you should read (and bookmark) “The Legends of Style” by John Faulds (aka Tyssen). It’s available at www.tyssendesign.com.au/articles/legends-of-style/

3

Where’s the site ?! I see only the tutorial site, not the OP’s .

4

D’oh! I thought for a second that was his page (I’ve been sick all week).

ballboy, sorry about the mixup. What does YOUR code look like?

5

the specific form is inside a few divs so there is no point in posting all the code, but as i said i also tried it on a page with nothing but the form:

<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<form>
	<table style="width:200px;background-color:#ff44ff;">
	<tr><td><input type="text" size="20"></td></tr>
	<tr><td><input type="text" size="27"></td></tr>
	</table>
	</form>	

</body>
</html>

here is an image with outputs in FF/IE demonstrating the 9px difference:

** Edit: I also tried the very basic form without the table and the dimensions of the field are the same.
http://img148.imageshack.us/img148/8481/inputwidthsm9.gif

Thanks guys!

6

What about the CSS code though?

7

In what way is your width-difference different?

The links auther compares the served document outcome from server setting with the meta-tag character setting, but tells nothing about how he saved the document to the server. One has to assume it is careful done. There is three phases; create/upload - server send - client read. My first thought was he had a byte-order-mark problem, and that’s hard to rule out when saving-info lacks. Though I think he’s conclusion/advice is well worth checking.

Questions to rule out BOM problem on a local system:

Do you edit-save the document in the same character set as the document is served with?

How does your application save document, can you test again saving without BOM if document is created in UTF-8?

Is it possible you edit/save in Windows ANSI and have utf-8 set in the meta tag, or the other way around? :slight_smile:

8

Hey guys,
sorry for not posting sooner, i had some personal stuff to take care of and didn’t get a chance to do any work in the last few days…

anyways, i just read the replies and played around with the code for a bit and found a solution:

i dropped the size parameter from the input field tags. used a width defined in em units and got that 9px difference to drop to 2px. adding margin:0 and padding:0 seems to have solved this issue completely.

here is the code that works:

<!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">
<head>
<title></title>
<style type="text/css">
<!--
 input
{
width:20em;
margin:0;
padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<input type="text"><br/>
<input type="text">
</form>	

</body>
</html>

Erik, if its still of any importance, i did try saving the file as UTF8 without BOM.

9

Just so you know, you need to enclose those inputs in a container (I’d recommend a fieldset, but many people use DIVs) if you want the HTML to validate. If you use a fieldset, you’ll have to use a legend as well (which can be “hidden away” with CSS if need be).

10

Just a last possibility. I assumed you had ruled out the browser default style and font setting. :blush:

11

I have the same problem, but with a twist: I’m not basing the width of the text field on a set pixel size, but rather on the width of the parent element. To that effect I have set the input text field to absolute positioning and set the left and right positions to 0. This works brilliantly in all browsers other than IE.

Any ideas on how to absolute-position the width of a input text box?

I checked out Dean Edwards’ site and am impressed with his solution. However, I need to get this in a CSS-only fix. My goal with this design is to eliminate all reliance on JavaScript.

Thanks!
Mike

12