Closed Bug 291009 Opened 19 years ago Closed 19 years ago

Element improperly absolutely positioned when containing block is TABLE

Categories

(Core :: Layout: Tables, defect)

Product:
Core
Component:
Layout: Tables
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 63895

People

(Reporter: jon, Unassigned)

Details

Attachments

(2 files)

This chesstable demonstrates the problem.
3.22 KB, text/html
Details
Second attempt at an attachment. Ignore the first attachment.
2.24 KB, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050406 Firefox/1.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050406 Firefox/1.0.3

I have an IMG inside a TD that is inside a TABLE.  The TABLE has relative
position, and the IMG has absolute position.  The IMG is positioned according to
the BODY, not the TABLE.

The W3C says:
http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details
If the element has 'position: absolute', the containing block is established by
the nearest ancestor with a 'position' other than 'static', in the following way:
1. In the case that the ancestor is block-level, the containing block is formed
by the padding edge of the ancestor.
2. In the case that the ancestor is inline-level, the containing block depends
on the 'direction' property of the ancestor:
a. If the 'direction' is 'ltr', the top and left of the containing block are the
top and left content edges of the first box generated by the ancestor, and the
bottom and right are the bottom and right content edges of the last box of the
ancestor.
b. If the 'direction' is 'rtl', the top and right are the top and right edges of
the first box generated by the ancestor, and the bottom and left are the bottom
and left content edges of the last box of the ancestor. 

Reproducible: Always

Steps to Reproduce:
1. Attachment is forthcoming.

Actual Results:  
The IMG is positioned according to the document root, not the TABLE.  In my
attachment, the IMG is positioned off the chess table depending on window size.

Expected Results:  
The IMG should be positioned according to the nearest positioned ancestor, even
if that ancestor is a TABLE, and theoritically, an inline-table, compact,
inline-block, etc.  The IMG should should appear in front of the white king's
opening square.


This problem can be averted by changing the table's style to display: block,
however, if I interpret the W3C doc correctly, this shouldn't be necessary.
The IMG should appear on the chessboard in front of the white king's opening
square.  I realize the image will be missing, but it should be obvious where
the image goes.
Comment on attachment 181170 [details]
This chesstable demonstrates the problem.  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"
/>
<title>Chessboard</title>
<style type="text/css">
body { text-align: center; }
table.chess { text-align: left; position: relative; margin: 0 auto; width:
400px; }
table.chess td { height: 50px; width: 50px; }
table.chess td.b { background-color: #404040; }
table.chess td.w { background-color: #E0E0E0; }
table.chess td img { position: absolute; height: 50px; width: 50px;  } 
/* div.cwrapper { position: relative; margin: 0 auto; width: 400px; } */

</style>
</head>
<body onload="init()">

<div class="cwrapper">
<table class="chess" cellpadding="0" cellspacing="0" border="0">
<tr>
	<td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td><td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td>
</tr>
<tr>
	<td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td><td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td>
</tr>
<tr>
	<td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td><td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td>
</tr>
<tr>
	<td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td><td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td>
</tr>
<tr>
	<td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td><td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td>
</tr>
<tr>
	<td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td><td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td>
</tr>
<tr>
	<td class="w"></td><td class="b"></td><td class="w"></td><td
class="b"></td><td class="w">
		<img src="http://www.websandbox.net/images/pawn.gif" id="pawn"
style="top: 300px; left: 150px;" /></td><td class="b"></td><td
class="w"></td><td class="b"></td>
</tr>
<tr>
	<td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td><td class="b"></td><td class="w"></td><td class="b"></td><td
class="w"></td>
</tr></table>
</div>

</body>
</html>
Comment on attachment 181170 [details]
This chesstable demonstrates the problem.  

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
><HTML><HEAD>
><META content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type"/><TITLE>Chessboard</TITLE>
>
><STYLE type="text/css">
>body { text-align: center; }
>table.chess { text-align: left; position: relative; margin: 0 auto; width: 400px; display: block; }
>table.chess td { height: 50px; width: 50px; }
>table.chess td.b { background-color: #404040; }
>table.chess td.w { background-color: #E0E0E0; }
>table.chess td img { position: absolute; height: 50px; width: 50px;  } 
>/* div.cwrapper { position: relative; margin: 0 auto; width: 400px; } */
>
></STYLE>
><SCRIPT type="text/javascript">
>var smx; var smy; var six; var siy; // start mouse x pos, start mouse y pos
>var body = document.getElementsByTagName("body")[0];
>var imgs;
>
>function init() {
>imgs = document.getElementsByTagName("IMG");
>imgs[0].addEventListener("mousedown",setDrag,false);
>imgs[0].addEventListener("mouseup",unsetDrag,false);
>}
>
>function setDrag(e) {
>  if(!e) e = window.event;
>  smx = e.pageX?e.pageX:e.x;
>  smy = e.pageY?e.pageY:e.y;
>  six = parseInt(this.style.left);
>  siy = parseInt(this.style.top);
>  this.addEventListener("mousemove",setDoDrag,false);
>}
>
>function setDoDrag(e) {
>   if(!e) e = window.event;
>   dodrag(this,e);
>}
>
>function unsetDrag(e) {
> this.removeEventListener("mousemove",setDoDrag,false);
>}
>
>function dodrag(img,e) {
> var emx = e.pageX?e.pageX:e.x;
> var emy = e.pageY?e.pageY:e.y;
> var eix = six + emx - smx;
> var eiy = siy + emy - smy;
> img.style.left = (eix) + "px";
> img.style.top = (eiy) + "px";
>}
>
>function nothing() { return; }
>
>
></SCRIPT></HEAD>
>
><BODY onload="init()">
>
><DIV class="cwrapper">
><TABLE cellspacing="0" cellpadding="0" border="0" class="chess">
><TBODY><TR>
>	<TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/>
></TR>
><TR>
>	<TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/>
></TR>
><TR>
>	<TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/>
></TR>
><TR>
>	<TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/>
></TR>
><TR>
>	<TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/>
></TR>
><TR>
>	<TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/>
></TR>
><TR>
>	<TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w">
>		<IMG style="top: 300px; left: 150px;" id="pawn" src="http://www.websandbox.net/images/pawn.gif"/></TD><TD class="b"/><TD class="w"/><TD class="b"/>
></TR>
><TR>
>	<TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/><TD class="b"/><TD class="w"/>
></TR></TBODY></TABLE>
></DIV>
>
></BODY></HTML>
Sorry for the attachments and the ugly attempts to edit my screwed up
attachment.  The second attachment is correct.  The first was the wrong file. 
My first attempt at submitting an attachment.  Someone feel free to delete the
first attachments and my stupid attempts at trying to edit.
And I'm officially dumb...
Someone found 63895 for me.

Duping to 63895.

*** This bug has been marked as a duplicate of 63895 ***
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: