Off Topic: 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
users eye and looks strange.

Any ideas / workarounds? I know this is off topic for this group, but
most on this group know an awful lot about HTML / CSS, and I thought it
was worth a shot.

-CJL

 

[VK]

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
users eye and looks strange.

Any ideas / workarounds? I know this is off topic for this group, but
most on this group know an awful lot about HTML / CSS, and I thought it
was worth a shot.

-CJL

Try <comp.infosystems.www.authoring.stylesheets> for LAF (look and
feel)issue help
But first assign different names to your two forms: it's a gross DOM
misuse.

 

[cjl]

VK:

Try <comp.infosystems.www.authoring.stylesheets> for LAF (look and
feel)issue help

Thanks, I will.

But first assign different names to your two forms: it's a gross DOM
misuse.

Even if they have different parents?

-CJL

 

[Thomas 'PointedEars' Lahn]

[...]
<form name="stealthme" action="" onSubmit="return
[...]
<form name="searchme" action="" onSubmit="return
initializeSearch(this);">
[...]

[...]
But first assign different names to your two forms:

They already have different names.

it's a gross DOM misuse.

Rubbish.


PointedEars

 

[Thomas 'PointedEars' Lahn]

VK:

Even if they have different parents?

Ignore what VK had to say on the subject. He mistakenly referred to
your `form' elements. It seems to me that you took that as a reference
to the `input' elements since your forms are not named the same.

There is nothing wrong in naming form controls the same, not even if
they have the same parent `form' element; the element objects will
be properly represented in a HTMLCollection. However, it complicates
accessing the respective element objects via the DOM if the parent
`form' element is the same; so in this case, iff(!) not needed, it
should be avoided.


PointedEars

 

[cjl]

T 'PE' L:

There is nothing wrong in naming form controls the same, not even if
they have the same parent `form' element; the element objects will
be properly represented in a HTMLCollection. However, it complicates
accessing the respective element objects via the DOM if the parent
`form' element is the same; so in this case, iff(!) not needed, it
should be avoided.

I probably don't need to, but it does make my javascript easier to
write because the input from either form is run through the same
functions, sliced and diced, etc.

Any ideas about the original post?

-CJL

 

[cjl]

I found the answer through trial and error, though now it seems quite
obvious.

I was relying on the size attribute in the html tag of the input
element. I simply added a style="width:125px" to both tags and now
they are identical in IE.

Whew.

-CJL

 

[Thomas 'PointedEars' Lahn]

T 'PE' L:

Proper attribution should help to quickly identify the author of the
quoted material. Therefore, using initials for it is counterproductive.

I probably don't need to, but it does make my javascript easier to
write because the input from either form is run through the same
functions, sliced and diced, etc.

The condition in my last sentence was "if the parent `form' element
is the same". Since that does not apply here, your approach will not
complicate matters.


PointedEars