<input> same size, two different widths in IE6?

Forum Moderators: not2easy

Message Too Old, No Replies

<input> same size, two different widths in IE6?

I've got two same-length text fields, but IE shows them up differently ..

Warboss Alex

2:23 pm on Apr 20, 2004 (gmt 0)

Hey everyone, I'm back again ..

The code in question is as follows:

Username <input type="text" size="20" name="username" />
Password <input type="password" size="20" name="password" />

On Firefox and Opera 7, this form shows up fine. IE6 however displays the text fields as having different lengths, even though their 'size' attribute is the same. Anyone know why? The 'username' field is about ten pixels longer.

I got round this by casting the <input> tags to block display type, and then assigning them the same width (80%), which did the trick, but I don't really want to block-display the text fields.. Any chance it can be done some other way?

Thanks in advance for any help,
Alex ...

BlobFisk

2:26 pm on Apr 20, 2004 (gmt 0)

Try using CSS, either my redefining the width of all <input>s:

input { width: 120px; }

Or by using a class:

.width120 { width: 120px; }

HTH

Warboss Alex

2:30 pm on Apr 20, 2004 (gmt 0)

I thought inputs couldn't take a width parameter.. oops.

Thanks man.

Do we know why IE does that, by the way?

SuzyUK

3:07 pm on Apr 20, 2004 (gmt 0)

No idea why IE does that.. it's new one on me..

but I did find:
input {
border: 1px solid red;
font-size: 12px;
font-family: courier;
}
border is just for clarity..

font-size on it's own triggered what you're seeing.. and then redefining a font-family (any I think) sorted it.. strange one.

Suzy

bruhaha

3:15 pm on Apr 20, 2004 (gmt 0)

Do we know why IE does that, by the way?

Does it do so consistently? I tried your example and had no problems in IE6 (both were the same width). Is there perhaps some other element in the form, or something else in the surrounding code constricting the overall width of the form or block the input boxes are located in?

BlobFisk

4:52 pm on Apr 20, 2004 (gmt 0)

I wonder if the DTD used has an input (excuse the pun) into why this happens?

pageoneresults

4:56 pm on Apr 20, 2004 (gmt 0)

I wonder if the DTD used has an input (excuse the pun) into why this happens?

Yes it does. I've run into these issues before. Pages without DTDs also display differently. Add the DTD and things appear as they should.

SuzyUK

5:15 pm on Apr 20, 2004 (gmt 0)

Bruhaha my test involved nothing else on the page, see code below

and DTD doesn't seem to have an effect here.. but the <meta charset> does?

I had started testing further because I hadn't noticed but in my test it was actually the password box that was longer, whereas Warboss_Alex said it was the username

try this code and uncomment the meta tags one at a time..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled</title>


<style type="text/css" media="screen">
input {
border: 1px solid red;
font-size: 12px;
/* font-family: arial; */
}
</style>
</head>
<body>
<input type="text" size="20" name="username" /><br />
<input type="password" size="20" name="password" />
</body>
</html>

The cure of re-defining a font-family seems to be the same regardless of whether you've already declared it in the body element or not.

don't thing I ever came across anythign that the charset affected before?

Suzy

[added] I had connection problems and didn't see the DTD replies in between times ;)
but.. I did try this test with different/no Doctypes and the results were the same..[/added]