«

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

cjl wrote:
> 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.

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

VK wrote:

> cjl wrote:
>> [...]
>> <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

cjl wrote:

> VK:
>> But first assign different names to your two forms: it's a gross DOM
>> misuse.
>
> 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

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

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

cjl wrote:

> T 'PE' L:

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

>> 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.

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