IE and password text box

Developing Apex applications, login page is unavoidable element for any site. This page is composed of three visible controls:

1. Text item (where you place username)
2. Password item (where you place password value)
3. Button (which submits page)

But in all IE versions, regardless you define password item width in Apex, you cannot see the same size as above text item. Here is example of this problem in mine two apps:

 

There are plenty of discussions about this problem, which exists only in IE (6,7,8,9 versions) and not in any other browser.

The solution

I will not analyze the cause but how to avoid elegantly this problem, in all IE versions. Because the problem is more then famous, there are plenty of solutions but I find the most suitable this small java script code which should be placed in page definition Header and footer section:

Idea is to "adjust" size of password item to width od text item, after page is rendered, what works very nice and fast. Here is the result:

The End

This solution is generic whenever you have only one Text item and one password item on login page, what is really 99.99% of all situation that I saw. So hard codding this small part in your every Apex application is really must to have proper login page.
Hope this helps someone.

Cheers!