Gaps between controls

Discussion in 'HTML' started by dimstthomas@yahoo.com, Nov 7, 2006.

  1. Guest

    Is there any way to eliminate the gaps between adjacent html controls?
    I want a text entry box with an adjacent label with no gap between
    them. I have tried setting borders, margins and padding to 0, and using
    forms, tables and divs but I still get about a 2 pixel gap between the
    controls.

    http://www.geocities.com/dimstthomas/index.htm

    <html>
    <head>
    </head>
    <body style="border:0;padding:0;margin:0;background:yellow">
    <input value="3.5"
    style="border:0;padding:0;margin:0;text-align:right;background:pink">
    <input readonly=true value="cm"
    style="border:0;padding:0;margin:0;background:lightblue">
    <BR>
    <form style="border:0;padding:0;margin:0;background:green">
    <input value="3.5"
    style="border:0;padding:0;margin:0;text-align:right;background:pink">
    <input readonly=true value="cm"
    style="border:0;padding:0;margin:0;background:lightblue">
    </form>
    <table style="border:0;padding:0;margin:0;background:red">
    <tr>
    <form style="border:0;padding :0;margin:0;background:green">
    <td>
    <input value="3.5"
    style="border:0;padding:0;margin:0;text-align:right;background:pink">
    <input readonly=true value="cm"
    style="border:0;padding:0;margin:0;background:lightblue">
    </td>
    </form>
    </tr>
    </table>
    <div style="border:0;padding :0;margin:0;background:green">
    <input value="3.5"
    style="border:0;padding:0;margin:0;text-align:right;background:pink">
    <input readonly=true value="cm"
    style="border:0;padding:0;margin:0;background:lightblue">
    </div>
    </body>
    </html>
    , Nov 7, 2006
    #1
    1. Advertising

  2. wrote:
    > Is there any way to eliminate the gaps between adjacent html controls?
    > I want a text entry box with an adjacent label with no gap between
    > them. I have tried setting borders, margins and padding to 0, and using
    > forms, tables and divs but I still get about a 2 pixel gap between the
    > controls.
    >


    Firstly, I know your just testing but us have such invalid markup that
    your results will not be valid

    <snip>

    > <table style="border:0;padding:0;margin:0;background:red">
    > <tr>
    > <form style="border:0;padding :0;margin:0;background:green">

    {You cannot put a FORM in a TABLE between the TR and TD elements like here }

    > <td>
    > <input value="3.5"
    > style="border:0;padding:0;margin:0;text-align:right;background:pink">

    ....

    <form action="someDestination.cgi" method="post">
    <!--
    now you must have a block element's opening tag here
    P, TABLE, DIV, or FIELDSET
    -->
    <table>
    <tr><td><input type="text"...


    <snip>

    > <input value="3.5"
    > style="border:0;padding:0;margin:0;text-align:right;background:pink">
    > <input readonly=true value="cm"


    Even in a test your should give your document a DOCTYPE

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    And using stylesheet or at least a STYLE element can consolidate your
    rules and make your testing markup more legible, e.g.

    <style type="text/css">
    BODY, TABLE, DIV { margin: 0; padding: 0; border: 0; }
    TABLE { border-collapse: collapse; }
    BODY { background-color: #FF0; }
    ..test1 { background-color: #F00; }
    ..test2 { background-color: #0F0; }

    ....

    </style>


    Now to answer your question, INPUTs are inline elements and the
    whitespace between them is supposed to be ignored is not always by
    browsers. Just remove the whitespace between INPUT elements in your markup

    <input type="text" value="3.5" class="dimension"><input type="text"
    value="cm" class="units" readonly>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 7, 2006
    #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. Arthur Dent
    Replies:
    1
    Views:
    1,053
    Jim Gibson
    Dec 3, 2003
  2. greg
    Replies:
    4
    Views:
    366
  3. Mark247
    Replies:
    1
    Views:
    610
    Marrow
    Sep 3, 2004
  4. Andrey
    Replies:
    6
    Views:
    362
    Andrew Koenig
    Jun 24, 2004
  5. cool2005

    Eliminate gaps between table cells...

    cool2005, May 20, 2005, in forum: Javascript
    Replies:
    5
    Views:
    110
    enrique
    May 20, 2005
Loading...

Share This Page