Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Off Topic: Width of text input box vs. password input box

Reply
Thread Tools

Off Topic: Width of text input box vs. password input box

 
 
cjl
Guest
Posts: n/a
 
      10-30-2005
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

 
Reply With Quote
 
 
 
 
VK
Guest
Posts: n/a
 
      10-30-2005

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.

 
Reply With Quote
 
 
 
 
cjl
Guest
Posts: n/a
 
      10-30-2005
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

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-30-2005
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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-30-2005
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
 
Reply With Quote
 
cjl
Guest
Posts: n/a
 
      10-30-2005
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

 
Reply With Quote
 
cjl
Guest
Posts: n/a
 
      10-30-2005

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

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-30-2005
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Workaround for IE6 select width cut off options' width SamuelXiao Javascript 5 01-06-2010 01:49 PM
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
Width of text input box vs. password input box cjl HTML 1 10-31-2005 11:46 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
hide the input box or change the color of input box in html ashutosh Java 3 06-16-2005 02:21 PM



Advertisments