Width of text input box vs. password input box

Discussion in 'HTML' 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
    user's eye and looks strange.

    Any ideas / workarounds?

    -CJL
     
    cjl, Oct 30, 2005
    #1
    1. Advertising

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

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
     
    Michael Winter, Oct 31, 2005
    #2
    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. AndrewF
    Replies:
    1
    Views:
    845
    Bruce Barker
    Oct 10, 2005
  2. Coder
    Replies:
    1
    Views:
    730
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  3. AAaron123
    Replies:
    2
    Views:
    2,367
    AAaron123
    Jan 16, 2009
  4. AAaron123
    Replies:
    1
    Views:
    1,422
    Oriane
    Jan 16, 2009
  5. cjl
    Replies:
    7
    Views:
    218
    Thomas 'PointedEars' Lahn
    Oct 30, 2005
Loading...

Share This Page