Table caption shifted for 1px in Firefox

On the demo at
<http://www.geocities.com/schools_ring/tmp/demo01/index.xml> the table
caption has 1px(?) indentation from the left in Firefox 1.5 and I'm
running out of ideas how to kill it - if it's possible at all. (Opera 9
shows a bigger indentation (2px?) but from the right side, but this fun
is for later :-)
IE displays the expected (at least by me) layout.

The relevant HTML block in the transformer
<http://www.geocities.com/schools_ring/tmp/demo01/default.xsl> is

....

table
col width="20%"
/><col width="50%"

/><col width="15%"
/><col width="15%"

/><caption>Repository</caption

thead
tr
th>Name</th
th>Description</th
th>Demo</th
th>Download</th
/tr
....

The relevant CSS block in the sheet
<http://www.geocities.com/schools_ring/tmp/demo01/default.css> is
....
table {
width: 100%;
margin: 0px auto;
padding: 0;
border-style: none;
border-collapse: collapse;
-moz-binding: url(zebra.xml#default);
behavior: url(zebra.htc)}

table caption {
width: 100%;
margin: 0px auto;
border: 1px solid #000000;
background-color: #DDDDDD;
padding: 5px 0px;
font-weight: bold}
....

If needed I can make a minimum case on a conventional HTML page, I just
thought someone may know an immediate know-how / no way answer.

VK wrote:

On the demo at
http://www.geocities.com/schools_ring/tmp/demo01/index.xml> the table
caption has 1px(?) indentation from the left in Firefox 1.5 and I'm
running out of ideas how to kill it - if it's possible at all. (Opera 9
shows a bigger indentation (2px?) but from the right side, but this fun
is for later :-)
IE displays the expected (at least by me) layout.

I was only reading about this yesterday:

http://www.aurora-il.org/table_test.htm

ex1 runs through the problem and ex2 solves. You just apply

caption {margin:-1px;}

apparently IE doesn't recognise margin values applied to <caption> so it
will just ignore it.

As to what you can do with opera; if the current version is the same as
Opera 7.54 then the above fix means that the caption won't render at all.

I suggest clicking your heels together three times with your fingers
crossed and hoping the problem goes away.

--
Brian O'Connor (ironcorona)

VK wrote:

On the demo at
http://www.geocities.com/schools_ring/tmp/demo01/index.xml> the table
caption has 1px(?) indentation from the left in Firefox 1.5 and I'm
running out of ideas how to kill it - if it's possible at all. (Opera 9
shows a bigger indentation (2px?) but from the right side, but this fun
is for later :-)
IE displays the expected (at least by me) layout.

ironcorona wrote:

I was only reading about this yesterday:
http://www.aurora-il.org/table_test.htm

ex1 runs through the problem and ex2 solves. You just apply

caption {margin:-1px;}

apparently IE doesn't recognise margin values applied to <caption> so it
will just ignore it.

As to what you can do with opera; if the current version is the same as
Opera 7.54 then the above fix means that the caption won't render at all.

I suggest clicking your heels together three times with your fingers
crossed and hoping the problem goes away.

Thanks, I updated the demo at
<http://www.geocities.com/schools_ring/tmp/demo01/index.xml>

Eh... With margin: auto -1px in Firefox left indent goes away, but an
approx 2px indent appears from the right (just like Opera 9 Beta did
before).
Opera 9 Beta now shows the caption right.
IE keeps showing the caption right, but table body seems not the same
(by columns' width) and all behaviors seems be lost (unlike in
Firefox).

I guess it's one of these dark styling glitches you better not touch -
as there is a hell hidden behind them :-)

I will read the article you've linked for a possible enlightment. If
failed within an hour I just leave it as it was (1px indent is
definitely irritating but something I can live with).

P.S. Truthfully the physical sense of negative margins in static
elements is beyond the scope of my understanding. :-(

VK wrote:

On the demo at
http://www.geocities.com/schools_ring/tmp/demo01/index.xml> the table
caption has 1px(?) indentation from the left in Firefox 1.5 and I'm
running out of ideas how to kill it - if it's possible at all. (Opera 9
shows a bigger indentation (2px?) but from the right side, but this fun
is for later :-)
IE displays the expected (at least by me) layout.

ironcorona wrote:
I was only reading about this yesterday:
http://www.aurora-il.org/table_test.htm

ex1 runs through the problem and ex2 solves. You just apply

caption {margin:-1px;}

apparently IE doesn't recognise margin values applied to <caption> so it
will just ignore it.

OK, thanks again for the tip, negative margin did the trick for FF
half-way: it's still here, but I managed to shift it to the right side
(a la Opera 9) which is visually much less irritating. The used hack
is:
....
table caption {
margin: 0px 0px 0px -1px;
....

Yet this hack is a complete woodoo to me (both in the reason of the
indent and in the way to move it away).

<http://www.aurora-il.org/table_test.htm> explains it as
<q>Since the caption lies within the table itself and we've not
assigned a specific width to it, its width is equal to the total width
of the table. Since a 1px border has been specified for the table, and
the total table width includes half the border, the computed caption
width ends up being 1 pixel less (1/2 from the left and right borders
respectively), resulting in the 1 pixel difference. Since a 1/2 pixel
cannot be rendered on-screen, Firefox adds the two half pixels together
and stick the resulting pixel space on the left border.</q>

AFAIK (and confirmed by MDC) table caption does *not* lie within the
table, and this is I guess the reason of discrepancies with IE. The
table caption is a whole separate (from the table) elements sharing
with the table the same anonymous box. I have no idea how and why would
it affect on parasite indents in my caption but obviously it does.
Please note that table borders are set to
border-width: 0px;
border-style: none;

Moving forward, any way...

In article <1147808913.279808.159110 (AT) j55g2000cwa (DOT) googlegroups.com>,
VK <schools_ring (AT) yahoo (DOT) com> wrote:

VK wrote:
On the demo at
http://www.geocities.com/schools_ring/tmp/demo01/index.xml> the table
caption has 1px(?) indentation from the left in Firefox 1.5 and I'm
running out of ideas how to kill it - if it's possible at all. (Opera 9
shows a bigger indentation (2px?) but from the right side, but this fun
is for later :-)
IE displays the expected (at least by me) layout.

ironcorona wrote:
I was only reading about this yesterday:
http://www.aurora-il.org/table_test.htm

ex1 runs through the problem and ex2 solves. You just apply

caption {margin:-1px;}

apparently IE doesn't recognise margin values applied to <caption> so it
will just ignore it.

OK, thanks again for the tip, negative margin did the trick for FF
half-way: it's still here, but I managed to shift it to the right side
(a la Opera 9) which is visually much less irritating. The used hack
is:
...
table caption {
margin: 0px 0px 0px -1px;
...

Yet this hack is a complete woodoo to me (both in the reason of the
indent and in the way to move it away).

You are right about this anyway. Needs more investigation.

An added |-moz-box-sizing: content-box;| helps as well - but I suspect
that this is just chasing shadows.

[later...] See also https://bugzilla.mozilla.org/show_bug.cgi?id=333643
--
John P Baker

JP. Baker wrote:

An added |-moz-box-sizing: content-box;| helps as well - but I suspect
that this is just chasing shadows.

Hah! <http://www.quirksmode.org/css/box.html>
-moz-box-sizing: content-box;

Doesn't solve my current problem, but the coolest discover of the year
for me.

[later...] See also https://bugzilla.mozilla.org/show_bug.cgi?id=333643

Yup. With two perfect testcases (plus mine 3rd) still not promoted even
to CONFIRMED. I guess some rendering evangelism problem.

I guess I just drop background and borders for caption (plain text
only). I had too much of productivity problems with <td span> element
starting the table to use this option.