ansaurus

Question

Why does IE make password boxes smaller than text boxes?

Answer 1

+14 A:

Because different font is used in those types of fields.

The fix is simply to specify that all inputs use the same font.

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>

Koistya Navin 2009-03-27 15:13:59

Answer 2

A:

Setting the width on textboxes will solve but I assume that's not what you want.

Try setting the min-width on input[type=text], input[type=password] to something greater than the default for textboxes. You'll probably need http://deanedwards.me.uk 's IE8 script to make those selectors work.

Macha 2009-03-27 15:15:06

Answer 3

+3 A:

You could append a fixed width for all inputs on the current page:

<style type="text/css">
input {
    width: 10em;    
}
</style>

Darin Dimitrov 2009-03-27 15:15:08

Note that this will set the width for all of your input elements, not just textboxes. Recommend setting a class of "textbox" on your textboxes, and then having a CSS style for input.textbox

Richard Ev 2009-03-27 15:21:48

@Richard E. Why set a class? input[type="text"],input[type="password"]

phihag 2009-03-27 15:25:58

Because [attribute] selectors don't work in IE.

bobince 2009-03-27 17:28:09

Answer 4

+1 A:

The font size is irrelevant. as seen in this test here: http://build.jhousemedia.com/ie_test.php

I wish I could give you a solid answer as to why but the work around is to apply a fixed width to it.

jerebear 2009-03-27 15:21:41

Your test shows that the font size is most relevant. Don't you see that there is a diffence in size between the first two fields and the next two fields that has a different font size?

Guffa 2009-03-27 15:27:20

Answer 5

A:

If you include the jQuery library in your page(s), you can use the following code to:

"When the document is fully loaded, take the first input element with type='text', and apply it's height and width to all input elements with type='password'".

I tested this on IE7 only, and it worked like a charm.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());

});
</script>

This is a generalized answer (taking the first element that matches input[type='text']). You can get a reference to a particular element that you want to match, and then get a reference to one or more password boxes with some other jQuery selector. Have a look at the documentation for getting elements by id or a group of elements by a common css class or xpath-type expression:

http://docs.jquery.com/Selectors

Rich 2009-03-27 15:26:46

Answer 6

A:

The problem is Internet Explorer's default encoding. Internet Explorer has an issue displaying the field lengths the same when using UTF-8 encoding. In IE, try changing the encoding to "Windows" (Page->Encoding in IE 8) while viewing a problem page and you'll see exactly what I mean.

2009-07-18 15:22:33

Answer 7

A:

Thanks to the person that posted this information. I appreciate you. I've bean coding for 19 years and could never figure this one out, hahahaha ehehehe thanks a million.

Warm Regards Max

Max 2009-11-28 20:12:22

ansaurus

tags:

views:

answers:

Why does IE make password boxes smaller than text boxes?

related questions