On Jul 16, 2009, at 8:17 AM, Jeff Jansen wrote:
> I'm creating some CSS styles for tables that sometimes will have a
> caption
> and sometime will not. I want 1.5em of white space above and below the
> table. If the table has a caption, the upper white space should go
> above the
> caption, and there should be 0.5em of white space between the
> caption and
> the first table row. If the table has no caption, the upper white
> space
> should go between the table and the preceding text.
>
> Because the <caption> tag goes just inside the <table> tag, you'd
> think that
> this would do the trick:
>
> table { margin-top: 1.5em; } /* add spacing with or without caption */
> caption { margin-bottom: 0.5em; } /* add spacing below caption */
>
> And indeed, this does work in IE8, and in FF3.5 IF there is no
> caption. But
> if there is a caption, Firefox 3.5 adds the margin-top *between* the
> caption
> and the first table row (!?), leaving no white space between the
> caption and
> the preceding text.
>
> Is this a Firefox display bug? Has anyone encountered this and found a
> workaround (other than a special class for tables that include
> captions; I'm
> trying to avoid that)?
Yes, that is a known bug in Firefox (and for the record, that will be
fixed in the next major Fx release - Firefox3.6 or whatever it will be
labelled; the patch landed a couple of days ago...).
Note that Safari also has bugs with this. If no margins are applied to
the caption, then it works correctly. If you apply a margin to the
caption, Safari inserts much more space than expected, the equivalent
of the margin-top of the table.
Opera is about the only released browser that does it all correctly. I
ran into some weird issue with IE 8 as well, a few days ago, but
haven't had time to analyse it.
Workarounds ?
1. don't use caption but headings (h2, h3, etc)
2. don't use margin-top on table (or margin-bottom if you use caption-
side: bottom).
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
