Width of text input box vs. password input box

[cjl]

I have the following HTML/CSS:

HTML:
<div id="stealth_form">
<form name="stealthme" action="" onSubmit="return
initializeSearch(this);">
<input type='password' name='query' size=16>
</form>
</div>

<div id="search_form">
<form name="searchme" action="" onSubmit="return
initializeSearch(this);">
<input type='text' name='query' size=16>
</form>
</div>

CSS:
#search_form
{
position: absolute;
top: 600px;
left: 210px;
height: 50px;
width: 300px;
background-color: rgb(70,70,70);
visibility: visible;

}

#stealth_form
{
position: absolute;
top: 600px;
left: 210px;
height: 50px;
width: 300px;
background-color: rgb(70,70,70);
visibility: hidden;

}

OK. I use javascript to dynamically set the visibility of #search_form
to 'hidden' and the visibility of #stealth_form to 'visible'. In
mozilla/firefox there is no visual difference. In IE the #stealth_form
input box is 1 pixel wider, and when the change occurs it catches the
user's eye and looks strange.

Any ideas / workarounds?

-CJL

 

[Michael Winter]

On 30/10/2005 19:10, cjl wrote:

[snip]

<div id="stealth_form">
<form name="stealthme" action="" onSubmit="return
initializeSearch(this);">

Why the extra block-level element (DIV)? Place the id attribute value on
the FORM, directly.

As you're passing a reference to the form to the submit event listener,
I doubt you need a name attribute.

[snip]

#search_form
{
position: absolute;

Rather than absolutely-positioning the FORM and manipulating the
visibility property, position it normally (statically) and change the
display property.

[snip]

visibility: hidden;

Hiding elements via CSS, then expecting a client-side script to be able
to reveal them, is not a good idea (unless you're operating in an
environment where browser usage is known and enforced). Hide the
elements using client-side code.

[snip]

In IE the #stealth_form input box is 1 pixel wider, and when the
change occurs it catches the user's eye and looks strange.

Have you considered setting the width using CSS, as well as HTML? Though
form controls are in-line, they are replaced elements so the width
property can be applied to them. Around about 9em should do.

Mike