|
|
Posted by Ben C on 07/06/07 23:16
On 2007-07-06, Tim Streater <timstreater@waitrose.com> 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 </form>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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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.
Navigation:
[Reply to this message]
|