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

Discussion in 'Javascript' started by cjl, Oct 30, 2005.

  1. cjl

    cjl Guest

    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, Oct 30, 2005
    #1
    1. Advertising

  2. cjl

    VK Guest

    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, Oct 30, 2005
    #2
    1. Advertising

  3. cjl

    cjl Guest

    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
     
    cjl, Oct 30, 2005
    #3
  4. 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
     
    Thomas 'PointedEars' Lahn, Oct 30, 2005
    #4
  5. 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
     
    Thomas 'PointedEars' Lahn, Oct 30, 2005
    #5
  6. cjl

    cjl Guest

    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, Oct 30, 2005
    #6
  7. cjl

    cjl Guest

    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, Oct 30, 2005
    #7
  8. 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
     
    Thomas 'PointedEars' Lahn, Oct 30, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayne...
    Replies:
    15
    Views:
    772
    Toby Inkster
    Jul 23, 2004
  2. cjl
    Replies:
    1
    Views:
    10,503
    Michael Winter
    Oct 31, 2005
  3. Coder
    Replies:
    1
    Views:
    703
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. jacob navia
    Replies:
    5
    Views:
    548
    spinoza1111
    May 30, 2010
  5. SamuelXiao
    Replies:
    5
    Views:
    280
    Thomas 'PointedEars' Lahn
    Jan 6, 2010
Loading...

Share This Page