360603 - center position:absolute IN td position:relative

Status: RESOLVED DUPLICATE of bug 35168

(Core :: Layout, defect)

Description

[Daniel Couto Vale]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-BR; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; pt-BR; rv:1.8.1) Gecko/20061010 Firefox/2.0

When an absolutely positioned CENTER tag is inserted into a relatively positioned TD tag, the CENTER tag spans to the width of the table and we loose the control of its position.
<style>
table,td,th {
	border:none;
	border-collapse:collapse;
	margin:0;
	padding:0;
}
center {
	position:absolute;
	top:37px;
	width:100%;
}
</style>

Reproducible: Always

Actual Results:  
The CENTER has the size of the table.
The CENTER does not respond to change in its TOP style attribute.

Expected Results:  
The CENTER should be the size of the TD.
The CENTER should be at the specified absolute position having the TD position as a root for calculating.

Comment 1

[Anders Conbere]

can you post the rest of the test case (as in the html as well) needed to replicated this.

Comment 2

[Gérard Talbot]

> When an absolutely positioned CENTER tag is inserted into a relatively
> positioned TD tag, the CENTER tag spans to the width of the table 

Setting position: absolute takes the element out of normal flow: that's by definition and it positions the element within its containing block.


> and we 
> loose the control of its position.

"Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow, affecting table alignment."
http://www.w3.org/TR/CSS2/tables.html#q7

"Positioning and floating of table cells can cause them not to be table cells anymore, according to the rules in section 9.7."
http://www.w3.org/TR/2006/WD-CSS21-20060411/tables.html#q7

"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."
http://www.w3.org/TR/2006/WD-CSS21-20060411/visuren.html#choose-position


Remember that tables should be used to present tabular data, not to format anything else. Using CSS position on table cells or inner table cell elements is for sure wrong from a semantic perspective, even from a presentation perspective.

Daniel, if you want to format/align an element thanks to CSS, just consult tutorials on that issue and don't use a table for that. 

- CSS Horizontal alignment
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

- Using Web standards in your webpages
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes

- Centring using CSS by D. Dorward
http://dorward.me.uk/www/centre/

Comment 3

[Martijn Wargers (dead)]

Well, you can't used position: relative for table cells in Mozilla, see bug 35168.
So is this bug a duplicate of bug 35168, then?

Comment 4

[Gérard Talbot]

Correct.

*** This bug has been marked as a duplicate of 35168 ***

Comment 5

[Daniel Couto Vale]

(In reply to comment #2)
> > When an absolutely positioned CENTER tag is inserted into a relatively
> > positioned TD tag, the CENTER tag spans to the width of the table 
> 
> Setting position: absolute takes the element out of normal flow: that's by
> definition and it positions the element within its containing block.
> 
> 
> > and we 
> > loose the control of its position.
> 
> "Table cells may be relatively and absolutely positioned, but this is not
> recommended: positioning and floating remove a box from the flow, affecting
> table alignment."
> http://www.w3.org/TR/CSS2/tables.html#q7
> 
> "Positioning and floating of table cells can cause them not to be table cells
> anymore, according to the rules in section 9.7."
> http://www.w3.org/TR/2006/WD-CSS21-20060411/tables.html#q7
> 
> "The effect of 'position:relative' on table-row-group, table-header-group,
> table-footer-group, table-row, table-column-group, table-column, table-cell,
> and table-caption elements is undefined."
> http://www.w3.org/TR/2006/WD-CSS21-20060411/visuren.html#choose-position
> 
> 
> Remember that tables should be used to present tabular data, not to format
> anything else. Using CSS position on table cells or inner table cell elements
> is for sure wrong from a semantic perspective, even from a presentation
> perspective.
> 
> Daniel, if you want to format/align an element thanks to CSS, just consult
> tutorials on that issue and don't use a table for that. 
> 
> - CSS Horizontal alignment
> http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html
> 
> - Using Web standards in your webpages
> http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes
> 
> - Centring using CSS by D. Dorward
> http://dorward.me.uk/www/centre/
> 

The bug is actually a replicate as mentioned below. About your recommendations, I understand table semantics and its proper use. But when dealing with large amounts of data and cross-browser professional presentations, we need to be aware of the most cost-effective choice. I wanted to get rid of one extra div element in order to be able to put more data in the client's window. That was the case. Here is an example of the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Mozilla Position Bug</title>
		<style type="text/css">
			table, td, th {
				margin:0px;
				border:0px none;
				padding:0px;
				border-collapse:collapse;
			}
			.element { height:30px; table-layout:fixed; background:#F0F0FF; width:100%; }
			.icon1 { height:30px; width:30px; }
			.icon2 { height:30px; width:50px; }
			.text { height:30px;position:relative; background:#FFFFF0; }
			.text center { background:#FFFFA0; position:absolute; left:0px;bottom:0px;right:0px; }
			.text center div {  width:120px;height:10px;  background:black; }
		</style>
	</head>

	<body>
		
		<table class="element">
			<tbody>
				<tr>
					<td class="icon1"></td>
					<th>This is how it is supposed to look like</th>
					<td class="icon2"></td>
				<tr>
					<td class="icon1"></td>
					<td><div class="text"><center><div></div></center></div></td>
					<td class="icon2"></td>
				</tr>
				<tr>
					<td class="icon1"></td>
					<th>This is how it looks</th>
					<td class="icon2"></td>
				</tr>
				<tr>
					<td class="icon1"></td>
					<td class="text"><center><div></div></center></td>
					<td class="icon2"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>