SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: form height

  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form height

    Hi

    When I change the height property on my form, the alignment goes of by a pixel. Why is this happening?

    This only appears to be happening in firefox. It is fine in safari.

    Here is the css:

    Code:
     input {
    background-color: #fff;
    border-color: #666;
    border-width:1px;
    border-style:solid;
    height: 50px;
    }
    Here is a screenshot:
    http://i.imgur.com/PmW5l.png

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you supply us with some markup or an url?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could try adding vertical-align:middle to the input but without mark-up we are just guessing.

    With form controls it could be any number of things so if you can post a link or some demo code showing the problem we'll try to help.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    Here is form html

    Code:
    <form id="form1" name="form1" method="post" action="members.php?k=submit">
          <p>
            <label for="post"></label>
            <input name="post" type="text" id="post" style="width:400px"; />
            <input type="submit" name="button" id="button" value="Submit" style="width:150px"; />
          </p>
        </form>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The code I gave you combined with using the correct dimensions on the submit works for me.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    input {
        background-color: #fff;
        border-color: #666;
        border-width:1px;
        border-style:solid;
        height:48px;
        padding:0;
        margin:0;
        vertical-align:middle
    }
    #button{height:50px}
    
    </style>
    </head>
    <body>
    <p>
        <label for="post"></label>
        <input name="post" type="text" id="post" style="width:400px"; />
        <input type="submit" name="button" id="button" value="Submit" style="width:150px"; />
    </p>
    </form>
    </body>
    </html>
    Submit buttons and selects use the broken box model where padding and borders are added inside the specified height so you have to account for these case by case.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •