[thelist] which bug in IE causes table background shift when table have caption?

Zhang Weiwu zhangweiwu at realss.com
Sat Jun 5 00:10:46 CDT 2010


Hello.

I observed that a table with "background-position: bottom" would shift
its background downwards when the table have an caption. Since caption
should be rendered outside table itself, this should not happen and thus
should be a bug. The only "fix" I found is to assign minus background
position value to lift background up, where, the very value, can only
beget by trail.

A simplified test case is here:
http://houyhnhnms.realss.cn/~yuliansu/harmony/test.html

Any browser other than IE would display the two tables, one with
caption, one without, with the same background. On IE6 and IE7 the table
with caption doesn't have the same background.

I am pretty sure I reinvented the wheel by discovered another well
documented IE bug, as the web industrial spent so much effort to well
document IE bugs for themselves as well as for Microsoft QA staff. My
question is, which bug I re-discovered? I googled a lot w/o luck, can
someone point me out where the bug is documented? I am also interested
in alternative fixes.

Thanks in advance!

P.S. I know it is not always welcome but frequent google to old posts
referring to 404 URL frustrated me so much that I think I should copy
the referred test case html here, for those read this post after the
link expired:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
dir="ltr">
	<head><title>Test</title>
		<style type="text/css">
			table {
				background: url('themes/garland/footer-bg.png') no-repeat center bottom;
				border: thin solid maroon;
			}
		</style>
	</head>
	<body>
<table>
<tbody><tr>
		<td>This</td>

		<td>Is</td>
		<td>A</td>
		<td>Table</td>
		<td>Without</td>
		<td>Caption</td>
</tr></tbody>
</table>

<hr/>
<table><caption>This is caption</caption>
<tbody><tr>
		<td>This</td>
		<td>Is</td>
		<td>A</td>
		<td>Table</td>
		<td>With</td>

		<td>Caption</td>
</tr></tbody>
</table>
</body>
</html>



More information about the thelist mailing list