Best IT Recipes

Why does IE lock passwords less than text fields?

See simple form below. This is just a text box on top of the password window. If you look at it in Internet Explorer 7 (and 8, and possibly others), the text field will be 10 pixels wider than the password field.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE Text vs. Password test</title> </head> <body> <form action="test"> <p> <input type="text"><br> <input type="password"> </p> </form> </body> </html>

Is there a way to “fix” this globally, either through CSS, or by adding something to the HTML?

+52
html css internet-explorer rendering
Mar 27 '09 at 15:11
source share
6 answers

Because these types of fields use a different font.

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

 <style type="text/css"> input { font-family: sans-serif; } </style>
+95
Mar 27 '09 at 15:13
source share
— -

You can add a fixed width for all inputs on the current page:

 <style type="text/css"> input { width: 10em; } </style>
+3
Mar 27 '09 at 15:15
source share

The problem is the default encoding of Internet Explorer. In Internet Explorer, the problem with displaying the field length is the same when using UTF-8 encoding. In IE, try changing the encoding to "Windows" (Page-> Encoding in IE 8) while viewing the problem page, and you will see exactly what I mean.

+3
Jul 18 '09 at 15:22
source share

If you include the jQuery library on your pages, you can use the following code for:

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

I tested this only on IE7 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 generic answer (taking the first element that matches the input [type = 'text']). You can get a link to a specific element that you want to map, and then get a link to one or more fields with another jQuery selector. Check out the documentation on getting elements by id or group of elements using a common css class or xpath type expression:

http://docs.jquery.com/Selectors

+1
Mar 27 '09 at 15:26
source share

Setting the width in the text boxes will be decided, but I assume that is not what you want.

Try setting the minimum input width [type = text], enter [type = password] at something larger than the default value for text fields. You will probably need a http://deanedwards.me.uk IE8 script to make these selectors work.

0
Mar 27 '09 at 15:15
source share

The font size does not matter. as seen from this test here: http://build.jhousemedia.com/ie_test.php

I would like to give you a solid answer about why, but the work around is to apply a fixed width to it.

0
Mar 27 '09 at 15:21
source share


More articles:


All Articles