Last Comment Bug 175190 - display:block style in tables has nasty side-effects
: display:block style in tables has nasty side-effects
Status: RESOLVED FIXED
read comment 16 before commenting
: testcase
Product: Core
Classification: Components
Component: Layout: Tables (show other bugs)
: Trunk
: All All
: P3 normal with 1 vote (vote)
: Future
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
: 229439 316151 (view as bug list)
Depends on: 211636
Blocks:
  Show dependency treegraph
 
Reported: 2002-10-17 23:27 PDT by Craig
Modified: 2011-08-21 22:53 PDT (History)
10 users (show)
bernd_mozilla: in‑testsuite+
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
space between all table elements (1003 bytes, text/html)
2002-10-17 23:55 PDT, Craig
no flags Details
Shows no space between table elements (757 bytes, text/html)
2002-10-17 23:56 PDT, Craig
no flags Details
The image used in a.htm and b.htm (952 bytes, image/gif)
2002-10-17 23:57 PDT, Craig
no flags Details
testcase with space (1.30 KB, text/html)
2002-10-18 00:03 PDT, Boris Zbarsky [:bz]
no flags Details
testcase without space (968 bytes, text/html)
2002-10-18 00:32 PDT, Boris Zbarsky [:bz]
no flags Details
simple display: block on a <tr> bug example (305 bytes, text/html)
2003-05-21 11:26 PDT, Matthew van Eerde
no flags Details
When showing/hiding a table cell using style="display: block" table cell gets misplaced and starts moving to the right. (1.60 KB, text/html)
2003-05-23 08:17 PDT, Ted Elliott
no flags Details

Description Craig 2002-10-17 23:27:56 PDT
If you create a style, let's call it nav, with display:block in it and then do 
'<td class="nav">' within a table, the table elements will get a border, even if 
the table was declared with 'cellpadding=0 cellspacing=0 border=0'. I don't know 
if that's correct, but it's certainly not true of other browsers.

Worse, if you use that style later in, say, an img element in a table, even in a 
different table, it will cause that spacing effect around the element. This is 
different behaviour to what happens if such an element appeared first!
eg. Whether '<tr><td><a href="a.htm" class="nav"> ...' is rendered with or 
without spacing around it depends on whether, and in what context, the "nav" 
class was used previously in the document.

(using Mozilla/5.0 (Windows; U; Win95; en-US; rv:1.2b) Gecko/20021014)



Mozilla/5.0 (Windows; U; Win95; en-US; rv:1.2b) Gecko/20021014
Comment 1 Boris Zbarsky [:bz] 2002-10-17 23:36:24 PDT
Could you please attach an HTML file showing these problems (especially the
second one)?
Comment 2 Craig 2002-10-17 23:55:33 PDT
Created attachment 103293 [details]
space between all table elements
Comment 3 Craig 2002-10-17 23:56:53 PDT
Created attachment 103294 [details]
Shows no space between table elements

The only difference between this file and a.htm is that the first table is no
longer present.
Comment 4 Craig 2002-10-17 23:57:51 PDT
Created attachment 103295 [details]
The image used in a.htm and b.htm
Comment 5 Boris Zbarsky [:bz] 2002-10-18 00:03:00 PDT
Created attachment 103297 [details]
testcase with space
Comment 6 Boris Zbarsky [:bz] 2002-10-18 00:32:36 PDT
Created attachment 103299 [details]
testcase without space
Comment 7 Boris Zbarsky [:bz] 2002-10-18 00:33:48 PDT
Confirmed on Linux too.
Comment 8 jussi lof 2003-01-10 00:49:50 PST
<html>
<head>
	<title>Untitled</title>
  <style>
     .dynStyle       {}
     .dynStyle:hover {background-color:#f00;display:block}
  </style>
</head>

<body

hovering with "display:block" style results
growing td

<table border="1">
  <tr>
    <td class="dynStyle">
      <a  href="#">'STRECH' BUG</a>
    </td>
  </tr>
</table>
</body>
</html>
Comment 9 Boris Zbarsky [:bz] 2003-01-10 01:19:43 PST
which has absolutely nothing to do with this bug....
Comment 10 Kevin McCluskey (gone) 2003-01-22 11:28:18 PST
Bulk setting karnaze's P2-P5 bugs to future
Comment 11 Bob Warren 2003-03-24 09:22:54 PST
Problem occurs when using a javascript function to hid a TR element in a table.
 here is the code I'm using:

// Table hiding function

var tableToggle = new Array(MAX_HIDABLE_TABLES);

function toggletable(valuename) {
    var temp = document.getElementById(valuename);
    
    if (temp.style.display == 'block' || temp.style.display == 'BLOCK') {
        temp.style.display = 'none';
    } else {
        temp.style.display = 'block';
    }
}
</SCRIPT>
<LINK href="resources/heb.css" rel=stylesheet>

<STYLE type=text/css>
 .collapse { display:"none"; }
 .expand { display: "block"; }
</STYLE>


<!-- Clickable 'hide' bar for hiding detail content -->
<a href="javascript:toggletable('thistable');">Link</a></font></div></td>

<tr bgcolor="#999999" name="thistable" id="thistable" class="collapse">
Comment 12 karnaze (gone) 2003-03-31 11:23:57 PST
mass reassign to default owner
Comment 13 Alex Peng 2003-04-30 08:54:50 PDT
I use javascript to toggle the display area.
I must use DIV, since TD,TR, and TBODY give me more space and improper alignment.
However, I do need to toggle TD,TR, or TBODY.

Both display:block and inline have this problem.
Comment 14 Matthew van Eerde 2003-05-21 11:26:09 PDT
Created attachment 123896 [details]
simple display: block on a <tr> bug example

Here is a simple example of the bug: declaring display: block on a <tr> doesn't
work.  There is a workaround for DHTML - set style.display to "" instead of
"block".  But, this is still a bug.
Comment 15 Alex Peng 2003-05-22 07:10:52 PDT
I voted for this bug. Later on, I realized that Mozilla was based on W3
definition. This is my response to comment #13. Maybe it't not a bug.

The following is a sample works for IE and Netscape 7.

-----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var ccCollapsedImg = "images/form_icons/collapsed.gif";
var ccExpandedImg = "images/form_icons/expanded.gif";

function ccToggleArea(fooDiv, fooImg) { //fooDiv:block Id, fooImg:image Id
	if (document.layers) return false;
	var fooObj=document.getElementById(fooDiv);
	var fooStyle=fooObj.style;
	if (fooStyle.display) {
		if (fooStyle.display=="none" || fooStyle.display=="")
{ccExpandObj(fooObj,fooImg);} 
		else { ccCollapseObj(fooObj,fooImg);}
	} else { ccCollapseObj(fooObj,fooImg);}
	return false;
}

function ccExpandArea(fooDiv) { //div ID, image ID
	if (document.layers) return;
	var fooObj=document.getElementById(fooDiv);
	return ccExpandObj(fooObj,arguments[1]);
}

function ccExpandObj(fooObj) { //obj, image ID
	var fooTag = fooObj.tagName;
	if (fooTag=="DIV") { fooObj.style.display="block";} 
	else if (fooTag=="SPAN") { fooObj.style.display="inline";} 
	else {
		if (document.all) { fooObj.style.display="block";
		} else {
			if (fooTag=="TABLE") { fooObj.style.display="table";}
			else if (fooTag=="LI") { fooObj.style.display="list-item";}
			else if (fooTag=="TR") { fooObj.style.display="table-row";}
			else if (fooTag=="THEAD" || fooTag=="TBODY") {
fooObj.style.display="table-row-group";}
			else if (fooTag=="TD" || fooTag=="TH") { fooObj.style.display="table-cell";}
			else { fooObj.style.display="block";}
		}
	}
	fooObj.style.visibility="visible";
	if (arguments[1]) {document.images[ arguments[1] ].src = ccExpandedImg;}
	return false;
}

function ccCollapseArea(fooDiv) { //div ID, image ID
	if (document.layers) return;
	var fooObj=document.getElementById(fooDiv);
	return ccCollapseObj(fooObj,arguments[1]);
}

function ccCollapseObj(fooObj) { //obj, image ID
	fooObj.style.display="none";
	fooObj.style.visibility="hidden";
	if (arguments[1]) {document.images[ arguments[1] ].src = ccCollapsedImg;}
	return false;
}


</SCRIPT>
	<title>Toggle Example</title>
</head>

<body>


<TABLE border="1">
<THEAD ID="head">
<TR>
	<TH id="head1">One</TH><TH id="head2">Two</TH>
</TR>
</THEAD>
<TBODY ID="body">
<TR id="row1">
	<TD id="cell1">1</TD><TD cell="cell2">2</TD>
</TR>

<TR>
	<TD>3</TD><TD>4</TD>
</TR>
<TR>
	<TD>5</TD><TD>6</TD>
</TR>
</TBODY>
</TABLE>

<BR>
<BUTTON onClick="ccToggleArea('body')">Toggle TBODY</BUTTON>
<BUTTON onClick="ccToggleArea('row1')">Toggle row one</BUTTON>
<BUTTON onClick="ccToggleArea('cell1')">Toggle Cell one</BUTTON>
<BUTTON onClick="ccToggleArea('head')">Toggle head</BUTTON>
<BUTTON onClick="ccToggleArea('head1')">Toggle head one</BUTTON>

<BR>
<OL id="nlist">
	<LI id="item1">Item one</LI>
	<LI id="item2">Item two</LI>
</OL>

<BUTTON onClick="ccToggleArea('item1')">Toggle Item 1</BUTTON>
<BUTTON onClick="ccToggleArea('nlist')">Toggle List</BUTTON>

</body>
</html>
Comment 16 Boris Zbarsky [:bz] 2003-05-22 07:18:34 PDT
Guys, please stop posting things in this bug that are not particularly relevant
to it... the bug covers the difference in rendering between the testcases in
comment 5 and comment 6; pasting large amounts of irrelevant HTML (which you
should never do anyway -- that's what attachments are for) is not helpful.
Comment 17 Ted Elliott 2003-05-23 08:17:21 PDT
Created attachment 124068 [details]
When showing/hiding a table cell using style="display: block" table cell gets misplaced and starts moving to the right.

Keep clicking on the minimize link and watch what happens to the content.
Comment 18 Christopher Hoess (gone) 2003-07-16 18:06:56 PDT
Comment on attachment 124068 [details]
When showing/hiding a table cell using style="display: block" table cell gets misplaced and starts moving to the right.

Ted, that's because table cells are normally display: table-cell rather than
display: block, so you're creating "anonymous content" with each toggle. (See
the CSS2 spec on table layout.) That has nothing to do with this bug.
Comment 19 Matthew van Eerde 2003-12-08 12:05:06 PST
I recommend closing this bug - it is an HTML authoring error to put display:
block an <tr> or a <td> in the first place, even with JS
Comment 20 Boris Zbarsky [:bz] 2003-12-08 12:23:27 PST
> it is an HTML authoring error to put display: block an <tr> or a <td> 

1)  Setting CSS properties cannot be an _HTML_ authoring error, by definition.
2)  Doing so is NOT a CSS authoring error.

Matthew, please read comment 16 -- it applies to you too.
Comment 21 Bernd 2003-12-26 02:17:08 PST
*** Bug 229439 has been marked as a duplicate of this bug. ***
Comment 22 Reed Loden [:reed] (use needinfo?) 2005-11-11 22:40:37 PST
*** Bug 316151 has been marked as a duplicate of this bug. ***
Comment 23 Boris Zbarsky [:bz] 2006-09-13 18:59:03 PDT
OK, so here's what's going on:

<td> has a 1px padding applied in the UA stylesheet, and since they are no longer table cells (due to the display type being changed), the cellpadding attribute doesn't affect the padding on the cells.

Fixing bug 211636 should fix this.
Comment 24 Bernd 2011-08-21 22:53:01 PDT
and bug 211636 did fix this http://hg.mozilla.org/mozilla-central/rev/4738b38a2f3c

Note You need to log in before you can comment on or make changes to this bug.