Philippe, Thanks for the insight. It's good to know it will be fixed.
For tables with captions, I decided to use a 'captioned' class for tables which removes the margin-top, and then include the same margin-top measurement as part of the caption style. I figured this is more semantically valid than using a heading, and I can always just make the 'captioned' style have no effect when FF gets fixed. Jeff Jansen : Portland, OR : USA -----Original Message----- From: Philippe Wittenbergh [mailto:[email protected]] Sent: Wednesday, July 15, 2009 4:50 PM To: CSS-D Cc: [email protected] Subject: Re: [css-d] Firefox table margin problem 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/
