Text alignment in input tags

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Lea

    Text alignment in input tags

    Hi,

    I 've got a problem concerning the text alignment of my three input tags.
    In IE6, the "login" and "ok" words are completely aligned on the bottom
    border. Yet my padding is : 0px 0px 0px 1px;
    Changing the line-height does not improve anything.
    In FIREFOX 0.9.3, the text of the first input tag is fine. The asterisks of
    the input type password are too high in text field. And finally, the text of
    the third input tag is on the bottom border of the text field.

    Pls find below the html and css codes. Any idea is kindly accepted. Thks.
    Léa

    HTML
    <div id="ctnr">
    <div id="header">... </div>
    <div id="container" >
    <div id="memberArea" >
    <form action="php/areaMember.php" method="post">
    <input type="text" name="login" value="login" size=15 maxlength=30 />
    <input type="password" name="password" value="password " size=15 maxlength=30
    />
    <input type="submit" name="submit" value="ok" />
    </form>
    </div>
    ....
    </div>
    </div>

    CSS

    body {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: Black;
    background-color: White;
    text-align:center; /*IE5/Win incorrectly applies the CSS "text-align"
    attribute to block-level elements. Declaring "text-align:center" for the
    containing block-level element (often the BODY element) horizontally centers
    the box in IE5/Win */
    }
    /* Page centering */
    div#ctnr {
    width : 750px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    text-align: left
    }
    ....
    div#memberArea {
    background-image: url(images/areaMember2.gif );
    height: 20px;
    width: 750px;
    }
    form {
    float: right;
    padding: 0px;
    margin: 0px;
    width: 250px;
    }
    input {
    margin: 1px 3px 1px 0px;
    padding: 0px 0px 0px 1px;
    height: 14px;
    border:1px solid gray;
    color: #666666;
    font-size: 10px;
    vertical-align: middle;
    }
    ....





Working...