Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Question about form layout

Reply
Thread Tools

Question about form layout

 
 
David Sevilla
Guest
Posts: n/a
 
      10-18-2007
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

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-18-2007
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
 
Reply With Quote
 
 
 
 
David Sevilla
Guest
Posts: n/a
 
      10-18-2007
Hi,

On Oct 18, 3:03 pm, "Jonathan N. Little" <(E-Mail Removed)>
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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-18-2007
On 2007-10-18, David Sevilla <(E-Mail Removed)> 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.
 
Reply With Quote
 
John L.
Guest
Posts: n/a
 
      10-18-2007
David Sevilla wrote:
> Hi,
>
> On Oct 18, 3:03 pm, "Jonathan N. Little" <(E-Mail Removed)>
> 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.
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      10-18-2007
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
 
Reply With Quote
 
David Sevilla
Guest
Posts: n/a
 
      10-18-2007
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

 
Reply With Quote
 
David Sevilla
Guest
Posts: n/a
 
      10-18-2007
On Oct 18, 4:33 pm, David Sevilla <(E-Mail Removed)> 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

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-18-2007
On 2007-10-18, Bergamot <(E-Mail Removed)> 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...
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Oppinion regarding grid layout vs flow layout NWx ASP .Net 4 02-19-2004 08:56 PM
Converting from grid layout to flow layout. RobertH ASP .Net 1 11-04-2003 12:43 AM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments