Question about form layout

Discussion in 'HTML' started by David Sevilla, Oct 18, 2007.

  1. Hi,

    I've put a form in my webpage: http://www.davidsevilla.com/personal-sp.html
    and I don't understand why I get some small extra space between the
    form and the previous line (in Firefox, in any case it's HTML Strict).
    It's the same if I change the "p" inside into a "div". I've tried to
    understand a bit how block elements work and so on, but this is too
    much for me :) Any explanations?

    Thanks,

    David
     
    David Sevilla, Oct 18, 2007
    #1
    1. Advertising

  2. David Sevilla wrote:
    > Hi,
    >
    > I've put a form in my webpage: http://www.davidsevilla.com/personal-sp.html
    > and I don't understand why I get some small extra space between the
    > form and the previous line (in Firefox, in any case it's HTML Strict).
    > It's the same if I change the "p" inside into a "div". I've tried to
    > understand a bit how block elements work and so on, but this is too
    > much for me :) Any explanations?


    <p>s by default have margins (the extra space you see) and <div>s don't.

    form p { margin: 0; padding: 0; }

    will get what your wish...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 18, 2007
    #2
    1. Advertising

  3. Hi,

    On Oct 18, 3:03 pm, "Jonathan N. Little" <>
    wrote:

    > > I've put a form in my webpage:http://www.davidsevilla.com/personal-sp.html
    > > and I don't understand why I get some small extra space between the
    > > form and the previous line (in Firefox, in any case it's HTML Strict).
    > > It's the same if I change the "p" inside into a "div". I've tried to
    > > understand a bit how block elements work and so on, but this is too
    > > much for me :) Any explanations?

    >
    > <p>s by default have margins (the extra space you see) and <div>s don't.


    Well, as I said I have tried both and they look the same...

    > form p { margin: 0; padding: 0; }
    >
    > will get what your wish...


    It didn't, the space between the form and the previous line is still
    bigger than the previous one, even with style="margin: 0; padding: 0;"
    added to the "p" inside the form...

    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Thanks,

    David
     
    David Sevilla, Oct 18, 2007
    #3
  4. David Sevilla

    Ben C Guest

    On 2007-10-18, David Sevilla <> wrote:
    > Hi,
    >
    > I've put a form in my webpage: http://www.davidsevilla.com/personal-sp.html
    > and I don't understand why I get some small extra space between the
    > form and the previous line (in Firefox, in any case it's HTML Strict).
    > It's the same if I change the "p" inside into a "div". I've tried to
    > understand a bit how block elements work and so on, but this is too
    > much for me :) Any explanations?


    The gap is because the <img> is an inline element and so sits on the
    baseline by default, as if it were a piece of text.

    You can move it to the bottom of the line box by setting vertical-align:
    bottom on the <img>.

    Alternatively, make it "display: block; margin: 0 auto" and remove the
    <br>. That makes the <img> a block-level element (so no baseline to
    worry about) horizontally centered in its container.
     
    Ben C, Oct 18, 2007
    #4
  5. David Sevilla

    John L. Guest

    David Sevilla wrote:
    > Hi,
    >
    > On Oct 18, 3:03 pm, "Jonathan N. Little" <>
    > wrote:
    >
    >>> I've put a form in my webpage:http://www.davidsevilla.com/personal-sp.html
    >>> and I don't understand why I get some small extra space between the
    >>> form and the previous line (in Firefox, in any case it's HTML Strict).
    >>> It's the same if I change the "p" inside into a "div". I've tried to
    >>> understand a bit how block elements work and so on, but this is too
    >>> much for me :) Any explanations?

    >> <p>s by default have margins (the extra space you see) and <div>s don't.

    >
    > Well, as I said I have tried both and they look the same...
    >
    >> form p { margin: 0; padding: 0; }
    >>
    >> will get what your wish...

    >
    > It didn't, the space between the form and the previous line is still
    > bigger than the previous one, even with style="margin: 0; padding: 0;"
    > added to the "p" inside the form...


    Add margin-bottom: 0; to the <p> immediately above the form, and either
    use a div inside the form or add margin: 0; to the p inside the form.

    As far as I know, forms don't have margins by detault in FF although you
    might want to include

    form {
    margin: 0;
    padding: 0;
    }

    for IE's benefit.
     
    John L., Oct 18, 2007
    #5
  6. David Sevilla

    Bergamot Guest

    John L. wrote:
    >
    > As far as I know, forms don't have margins by detault in FF


    Yes, they do. Same defaults as paragraphs, though margin collapsing
    rules apply.

    --
    Berg
     
    Bergamot, Oct 18, 2007
    #6
  7. Hi,

    > Add margin-bottom: 0; to the <p> immediately above the form, and either
    > use a div inside the form or add margin: 0; to the p inside the form.
    >
    > As far as I know, forms don't have margins by detault in FF although you
    > might want to include
    >
    > form {
    > margin: 0;
    > padding: 0;
    >
    > }
    >
    > for IE's benefit.


    Well, I see clearly now that the extra space is nothing more that the
    usual space between paragraphs. Even if I change the inside "p" into a
    "div", it just doesn't work because the "p" before the form is
    considered closed as soon as the "form" tag appears (this I deduce
    from testing with the W3 validator).

    So, I guess there are two different paragraphs here, and the solution
    is to use CSS as suggested.

    Thanks,

    David
     
    David Sevilla, Oct 18, 2007
    #7
  8. On Oct 18, 4:33 pm, David Sevilla <> wrote:

    > So, I guess there are two different paragraphs here, and the solution
    > is to use CSS as suggested.


    .... or, more simply, to put everything inside the form so there's only
    one paragraph :)

    David
     
    David Sevilla, Oct 18, 2007
    #8
  9. David Sevilla

    Ben C Guest

    On 2007-10-18, Bergamot <> wrote:
    > John L. wrote:
    >>
    >> As far as I know, forms don't have margins by detault in FF

    >
    > Yes, they do. Same defaults as paragraphs, though margin collapsing
    > rules apply.


    In FF form has a margin-bottom of 1em in quirks mode, but none in
    strict. No margin-top.

    P on the other hand has both top and bottom margins that may be a tiny
    bit bigger than 1em. Now where did I put that screen-ruler...
     
    Ben C, Oct 18, 2007
    #9
    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. Rick Spiewak
    Replies:
    3
    Views:
    3,221
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    761
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. NWx
    Replies:
    4
    Views:
    3,005
    Kevin Spencer
    Feb 19, 2004
  4. Eric
    Replies:
    4
    Views:
    798
    clintonG
    Dec 24, 2004
  5. Replies:
    1
    Views:
    649
    John Timney \(MVP\)
    Jun 19, 2006
Loading...

Share This Page