#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    3
    Rep Power
    0

    Input boxes, spacing and CSS help needed


    Does anyone know if it's possible to position input boxes (in a form type tag) so that they sit one on top of the other but with no spacing between them at all. i.e. if there are 3 input boxes and the background colour is set to black they will be displayed as a solid black box in the browser.

    The below appears to work in Mozilla but not opera or IE...

    I have been testing using the following HTML script:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <style>

    .field
    {
    border:none;
    font-size: 8pt;
    border-top:none;
    border-bottom:none;
    border-left:none;
    border-right:none;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-top:0;
    padding-left:0;
    padding-bottom:0;
    padding-right:0;
    border-collapse:collapse;
    background: #000000 none;
    color: Black;

    }
    </style>
    </head>

    <body>

    <TABLE BORDER="0" cellspacing="0" cellpadding="0">
    <TR><TD><form><INPUT SIZE="10" TYPE="text" class="field"></TD></TR>
    <TR><TD><INPUT SIZE="10" TYPE="text" class="field"></TD></TR>
    <TR><TD><INPUT SIZE="10" TYPE="text" class="field"></form></TD></TR>
    </TABLE>
    <br />
    <form><p><INPUT SIZE="10" TYPE="text"></p>
    <p><INPUT SIZE="10" TYPE="text"></p>
    <p><INPUT SIZE="10" TYPE="text"></p></form>


    </body>
    </html>

    Thanks for your help...
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2003
    Posts
    804
    Rep Power
    100
    Apparently IE has an "automatic" 1px margin. Try a browser detect and if you detect IE, set the top and bottom margins to -1px.

IMN logo majestic logo threadwatch logo seochat tools logo