"VK" <sc**********@yahoo.com> wrote in
news:11**********************@g43g2000cwa.googlegr oups.com:
It would be good if the annoying table caption detachment has been
fixed.
Like? Seems showing right to me in a plain table (?)
Yes, in a plain table that is what it seems. But when you fill all
elements of the table with background color, and then set the top margin
in the table, the defect becomes clear.
Below the equal sign border below I have pasted in the text for an
interactive HTML document which demonstrates the defect (the HTML
validates by the way). You can enter in a top-margin for the table to see
things (that also keeps this discussion somewhat relevant to the
newsgroup).
The behavior of table and caption element styling in CSS2 is described and
even diagrammed :
http://www.w3.org/TR/CSS21/tables.html#q5
If your reading & interpretation of the CSS2 spec on this interaction
between caption and table elements is different, please elaborate
effusively. Otherwise this shows up as a clear defect in Mozilla Firefox
1.0.7 but not in MSIE 6 (one of the few cases where Microsoft gets it
right and Mozilla devgroup does not).
[the text below is the entire contents of an interactive HTML document
which attempts to make the case that table caption styling in some
browsers may be defective; creating this as a file should be possible]
===== start of HTML document content =============================
<!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.marg inTop =
inpObj.value + "em";
tdElem.replaceChild(document.createTextNode("Table top margin is now
" +
inpObj.value), 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
<p align="center">
<table id="exampletable">
<caption>The Table’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;">
Enter a value (in em) to set the top margin of the table above and
watch its caption move up and down: <input type="text" size="4"
maxlength="4" onchange="setTopMargin(this);">
<p>
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’s
border is <span style="color:magenta;"><b>magenta</b></span>.
<h1>What Is Happening?</h1>
The 'margin' property for the <code><table></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’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.
<p>
The margins can be set to be less than zero (0) as well, providing
opportunity for bizarre styling, if not mischief.
</body>
</html>
===== end of HTML document content =============================
