Forms in table cells modify cell height - grrr

I post an example here which is giving me ulcers. I've cut it down to
the minimum possible to illustrate the problem.

There are two tables. In the first, the rows with the buttons render
with extra space at the bottom of the cell, below the text area and the
button. Why is this space there and how do I get rid of it? I sort of
succeed in this with the second table, but I have to delete the s
to achieve it.

Under OS X, Safari and Firefox give me the extra space in every row of
the first table, Safari gives none in the second while Firefox only
gives none for buttons 5 and 6. IE renders both tables identically.

Under XP I only tried Firefox and it appears to behave the same as on
the Mac.

I cut down the style sheet referred to and it now contains just:

..mtext {FONT: 11px verdana,tahoma,arial; color: #000000;}

Any clue about how to remove the unwanted space appreciated. If there
are better ways of doing this I can store that up and try to apply it
later.

Thanks -- tim


====== start of html =====

Re: Forms in table cells modify cell height - grrr

Gazing into my crystal ball I observed Tim Streater
writing in news:timstreater-
E9D5D5.22344806072007@individual.net:

> I post an example here which is giving me ulcers. I've cut it down to
> the minimum possible to illustrate the problem.

A URL would be much better, but...

>
> There are two tables. In the first, the rows with the buttons render
> with extra space at the bottom of the cell, below the text area and the
> button. Why is this space there and how do I get rid of it? I sort of
> succeed in this with the second table, but I have to delete the
s
> to achieve it.

Form is a block element. If you want to use a table with form you have
to put the form element outside the table element.

>
> Under OS X, Safari and Firefox give me the extra space in every row of
> the first table, Safari gives none in the second while Firefox only
> gives none for buttons 5 and 6. IE renders both tables identically.
>
> Under XP I only tried Firefox and it appears to behave the same as on
> the Mac.

Again, a URL would be helpful.

>
> I cut down the style sheet referred to and it now contains just:
>
> .mtext {FONT: 11px verdana,tahoma,arial; color: #000000;}

You know, don't you that IE can't resize pixels, and are you sure that
11px is going to be large enough for me to see?

>
> Any clue about how to remove the unwanted space appreciated. If there
> are better ways of doing this I can store that up and try to apply it
> later.
>

Yes, get rid of the tables and use the right tool for the job - label
elments and CSS.

>
>====== start of html =====
>
>

No DocType?

>
>

No title element? How am I supposed to know where I am?

>
>
>

What's this? Two empty paragraphs? Why? If you need spacing put it in
the bottom margin of the preceding element.

>
>

Re: Forms in table cells modify cell height - grrr

On 2007-07-06, Tim Streater wrote:
> I post an example here which is giving me ulcers. I've cut it down to
> the minimum possible to illustrate the problem.
>
> There are two tables. In the first, the rows with the buttons render
> with extra space at the bottom of the cell, below the text area and the
> button. Why is this space there and how do I get rid of it? I sort of
> succeed in this with the second table, but I have to delete the s
> to achieve it.

Please, no!

Common sense should tell you that if you are deliberately making the
HTML invalid then you are going in the wrong direction.

> Under OS X, Safari and Firefox give me the extra space in every row of
> the first table, Safari gives none in the second while Firefox only
> gives none for buttons 5 and 6. IE renders both tables identically.

Firefox in quirks mode gives form a bottom margin of about 0.5em.

You can fix your problem in two ways, of which you should do at least
the second and possibly both:

form { margin: 0 }

in the styles

or use the strict mode doctype, i.e. put this right at the top of every
document:

"http://www.w3.org/TR/REC-html40/strict.dtd">

Do that anyway-- if you don't you get quirks mode, which is full of
annoying and surprising quirks like that bottom margin on forms. You
might call it ulcers mode.

I saw this problem on some of the admin pages that my embedded
router/modem thing produces. The author of those had "solved" the
problem by applying a top margin of -15px to the next element in the
document!

Even worse someone suggested on one of these NGs the other day "fixing"
the same problem by using broken form/table structure. It seems you were
starting to circle the same drain. I wonder how many of the broken
forms/tables I see every day on the web are caused by people trying
anything to make that bottom margin go away.

Re: Forms in table cells modify cell height - grrr

In article ,
Adrienne Boswell wrote:

> Gazing into my crystal ball I observed Tim Streater
> writing in news:timstreater-
> E9D5D5.22344806072007@individual.net:
>
> > I post an example here which is giving me ulcers. I've cut it down to
> > the minimum possible to illustrate the problem.
>
> A URL would be much better, but...
>
> >
> > There are two tables. In the first, the rows with the buttons render
> > with extra space at the bottom of the cell, below the text area and the
> > button. Why is this space there and how do I get rid of it? I sort of
> > succeed in this with the second table, but I have to delete the
> s
> > to achieve it.
>
> Form is a block element. If you want to use a table with form you have
> to put the form element outside the table element.

See below.

> > Under OS X, Safari and Firefox give me the extra space in every row of
> > the first table, Safari gives none in the second while Firefox only
> > gives none for buttons 5 and 6. IE renders both tables identically.
> >
> > Under XP I only tried Firefox and it appears to behave the same as on
> > the Mac.
>
> Again, a URL would be helpful.
>
> >
> > I cut down the style sheet referred to and it now contains just:
> >
> > .mtext {FONT: 11px verdana,tahoma,arial; color: #000000;}
>
> You know, don't you that IE can't resize pixels, and are you sure that
> 11px is going to be large enough for me to see?

This is taken from the front end of our assets database that helps us to
manage our Europe-wide network. No complaints about this so far. I doubt
if any of our user base is using IE, although obviously I test what I am
doing against it.

> >
> > Any clue about how to remove the unwanted space appreciated. If there
> > are better ways of doing this I can store that up and try to apply it
> > later.
> >
>
> Yes, get rid of the tables and use the right tool for the job - label
> elments and CSS.

I want to know what's going on. If there's a better technique I can look
at that in parallel. For the moment that's not relevant.

> >
> >====== start of html =====
> >
> >
>
> No DocType?

I indicated above that I cut this example down to the bare minimum of
text to demonstrate my issue.

> >
> >
>
> No title element? How am I supposed to know where I am?

See above.

> >
> >
> >