114734 - top/bottom captions need to be more compatible with IE and Opera

Status: RESOLVED WONTFIX

(Core :: Layout: Tables, defect)

Description

[karnaze (gone)]

Currently we treat a caption independently from its table. For example, a long 
caption can be longer than its table, unlike other browers (in most cases). 
Opera (and to some degree IE) consider the caption as constrained by the table 
in many cases rather than the table's containing block as we do. For example, in 
Opera <table style="margin-left:10px"><caption style="margin-left:10px"> would 
give the table a 10px left margin relative to the table's containing block and 
the caption a 10px left margin relative to the table.

Comment 1

[karnaze (gone)]

Attachment: testcase with margins on table and caption

Comment 2

[karnaze (gone)]

Reassigning to Bernd for additional test cases. I may have been mistaken about a 
longer caption extending beyond the table (at least I can't seem to construct 
the appropriate test case for it).

Comment 3

[Sampo Syreeni]

Attachment: Floated tables with top-captions

Demonstrates floating of tables with captions. Four cases: left/right floated
50% width tables with 1cm flow-side margins on caption and table, or table
only.

Comment 4

[Bernd]

Attachment: caption maxElementsize based oversize

Comment 5

[Lasse Marøen]

Attachment: Table with caption and margin

This testcase shows table caption being seperated from the table content
because of the margin value of the table element.

Comment 6

[Bernd]

Is there anything that is wrong with the testcase ( attachment 153892 [details] ),
especially when looking at 
http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#q5 ?

Comment 7

[Lasse Marøen]

Comment on attachment 153892 [details]
Table with caption and margin

No, not when looking at that URL :-)

Sorry, and thanks for clearing that up.

Comment 8

[Sampo Syreeni]

> Four cases: left/right floated 50% width tables with 1cm flow-side margins on
> caption and table, or table only.

My earlier test case seems to work out fine now, by my own description. I
suggest you cross it out, and re-evaluate this bug. It might well be fixed as a
whole. 

Version: Mozilla/5.0 (Windows; U; Win95; en-US; rv:1.5a) Gecko/20030721 Mozilla
Firebird/0.6 .

Comment 9

[Dillon Debidin]

(In reply to comment #0)
> Currently we treat a caption independently from its table. For example, a long 
> caption can be longer than its table, unlike other browers (in most cases). 
> Opera (and to some degree IE) consider the caption as constrained by the table 
> in many cases rather than the table's containing block as we do. For example, in 
> Opera <table style="margin-left:10px"><caption style="margin-left:10px"> would 
> give the table a 10px left margin relative to the table's containing block and 
> the caption a 10px left margin relative to the table.

I've been using captions on tabeles on www.cptn.com and it looks odd in firefox. I prefer it to be apart of the talbe. Since the <caption></caption> is within the table element.

The idea of a long caption, would just have to be a heading with a description outside of the table. The captions are supposed to be the table titles and not the full summaries or translations of something. There is a table summary attribute that handles such things.

Comment 10

[S M Halloran]

Assuming that Firefox/Mozilla browsers wish to conform to the HTML 4.01 specification (the latest specification at this date, to my knowledge), a CAPTION element is contained within a TABLE element both in document STRUCTURE and thus in STYLE.

It is unexpected behavior to web page developers to see CSS styling that actually separates the caption box from the top edge of the first row of table cells.  This is easily observed by coloring the background color of the caption to a color distinct from its containing element (which should be the table element) and at least distinct from all other block elements.

The short valid interactive HTML document below contains a script with example table.  The input box can be used to invoke script which changes the TOP MARGIN of the table.  Note that the caption increases or decreases its space between the top edge of the first row table cells depending on the increase or decreasee of the margin-top setting.  There is text above the table in a standard paragraph block.  The top margin of the table SHOULD, according to my reading of the HTML specification, be the top border/edge of the caption actually, and not the first row of table cells.  Thus the table with its caption, should increase or decrease its space with the block element above it, not the block of table cells disconnected from the caption.  The HTML document below explains this at length below.

Just cut and paste the document text below into a simple text editor and save as Caption.html or a name of your choosing, and then open it in any Mozilla/Firefox browser.  I also recommend trying other browsers to see how they behave as well (I happen to know MSIE-6 produces the expected behavior).

========== Start of Valid Interactive HTML document =============

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Table Caption Demo</title>
<style type="text/css">
   body { background-color:#f8fff8; margin:2em 10%;line-height:1.2em;
 	  width:50em;}
   p {margin-top:0.5em;}
   #title {font:bold 200% Tahoma,Arial,sans-serif;text-align:center;color:#09d;}
   table {margin:1em 0;background-color:#999;
       border:3px solid magenta;padding:0;}
   td {background-color:#333;color:white;padding:0.1em 0.3em;margin:0;}
   caption {background-color:navy;color:yellow;margin:0;}
   input {text-align:right;font-size:120%;}
   #report {padding:0.1em 0.3em;background-color:white;color:blue;}
</style>
<script type="text/javascript">
 function setTopMargin(inpObj) {
  var tdElem = document.getElementById("report");
  if (inpObj.value.search(/^[-+]?([0-9]*\.)?[0-9]+$/) >= 0) {
   document.getElementById("exampletable").style.marginTop =
	inpObj.value + "em";
    tdElem.replaceChild(document.createTextNode("Table top margin is now " +
     inpObj.value + "em"), tdElem.firstChild);
  } else {
    tdElem.replaceChild(document.createTextNode("Enter any valid real " +
    "(floating point) number not in scientific notation"), tdElem.firstChild);
   }
}
</script>
</head>

<body>
<p id="title">
Table Caption Defect Demo
<div style="border:1px solid blue;padding:1em;">
This <em>interactive</em> document has been developed to demonstrate
a defect in HTTP clients (web page browsers) in which the caption of
a table may or may not be separated from the top border/edge of table
cells.  A reading of the HTML specification in effect at this time
(HTML 4.01) suggests that a table caption (the <code>CAPTION</code>
element) is to be contained within a table (the <code>TABLE</code>
element) <em>structurally</em>, and thus a caption should also be
contained within the table <em>in style</em> as well.  A caption
should never appear to be disconnected, separated, removed from
the table, at least according to one reading of the HTML specification.
The colors of the background or borders of table and its child elements
have been altered to more easily demonstrate this effect.
<p>
These paragraphs above the table below are bordered by a blue-lined box.
When the top margin of the table is increased, the space between the
bottom border of these boxed paragraphs, and the caption of the table
should move with the table.  If the caption stays put and only the
block of rowed cells that form the table is moved, this is not only
unexpected behavior, but not in compliance with the HTML specification.
Browsers wishing to conform to the specification should render tabular
blocks integrated with their captions.
<p>
For fun, try margin-top values which are less than zero.
</div>
<p align="center">
<table id="exampletable">
<caption>The Table&rsquo;s Caption</caption>
<tr><td>Row 1-Column 1 Cell  <td>Row 1-Column 2 Cell  <td>Row 1-Column 3 Cell
<tr><td>Row 2-Column 1 Cell  <td>Row 2-Column 2 Cell  <td>Row 2-Column 3 Cell
<tr><td>Row 3-Column 1 Cell  <td>Row 3-Column 2 Cell  <td>Row 3-Column 3 Cell
<tr><td colspan="3" id="report">Table top margin is now 1em
</table>
<p style="background-color:#ddd;padding:0.1em 0.3em;width:80%;float:left;">
Enter any <em>valid numeric</em> value (in em) to set the top margin
of the table above and watch its caption move up and down (press Enter
to effect changes in entered values):
<p style="margin-top:2em;">
<input type="text" size="4" maxlength="4" onchange="setTopMargin(this);"
 style="margin-left:1em;">
<p style="clear:both;">
Check this table in Internet Explorer 6 and Firefox 1.0.7.
The table caption is one of the few things which Microsoft seems to get
right (with respect to reasonable expectations) and which the Mozilla
development team has yet to deal with.
<p>
The background colors are set distinct from the body background color
to make that plain.  It is assumed that the background colors define the
area on the document filled by the document element.  The table&rsquo;s
border is <span style="color:magenta;"><b>magenta</b></span>.

<h1>What Is Happening?</h1>
The 'margin' property for the <code>&lt;table&gt;</code> is supposed to
set the margin for the table itself.  But the table caption is part of
the table, not separate from it.  The table caption is usually at the
top of the table (although it is configurable for CSS-styled documents).
So when the top margin of the table is set, the caption should remain
attached to the top border that forms the first table row, not be pushed
away from it.  The margin of an element separates that element from others
in the flow of document content except when those elements are integral
(contained by) to the structure of the containing element.
<p>
The one exception is when the caption&rsquo;s own margins are set:
a caption bottom margin property set greater than 0 can separate the
caption from the top border of the first row of cells of the table,
apparently according to the CSS2 specification.
</body>
</html>
==========  End of Valid Interactive HTML document =============

Comment 11

[Bernd]

we are going for a css 2.1, css3 compliance