display:block style in tables has nasty side-effects

RESOLVED FIXED in Future

Status

()

Core
Layout: Tables
P3
normal
RESOLVED FIXED
15 years ago
6 years ago

People

(Reporter: Craig, Unassigned)

Tracking

({testcase})

Trunk
Future
testcase
Points:
---
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: read comment 16 before commenting)

Attachments

(4 attachments, 3 obsolete attachments)

(Reporter)

Description

15 years ago
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
Could you please attach an HTML file showing these problems (especially the
second one)?
(Reporter)

Comment 2

15 years ago
Created attachment 103293 [details]
space between all table elements
(Reporter)

Comment 3

15 years ago
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.
(Reporter)

Comment 4

15 years ago
Created attachment 103295 [details]
The image used in a.htm and b.htm
Created attachment 103297 [details]
testcase with space
Attachment #103293 - Attachment is obsolete: true
Created attachment 103299 [details]
testcase without space
Attachment #103294 - Attachment is obsolete: true
Confirmed on Linux too.
Assignee: attinasi → karnaze
Status: UNCONFIRMED → NEW
Component: Layout → HTMLTables
Ever confirmed: true
OS: Windows 95 → All
QA Contact: petersen → amar
Hardware: PC → All

Updated

15 years ago
Keywords: testcase
Priority: -- → P3

Comment 8

15 years ago
<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>
which has absolutely nothing to do with this bug....
Bulk setting karnaze's P2-P5 bugs to future
Target Milestone: --- → Future

Comment 11

15 years ago
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

14 years ago
mass reassign to default owner
Assignee: karnaze → table
QA Contact: amar → madhur
Target Milestone: Future → ---

Updated

14 years ago
Target Milestone: --- → Future

Comment 13

14 years ago
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

14 years ago
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

14 years ago
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>
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

14 years ago
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 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.
Attachment #124068 - Attachment is obsolete: true

Comment 19

14 years ago
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
> 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.
Whiteboard: read comment 16 before commenting

Comment 21

14 years ago
*** Bug 229439 has been marked as a duplicate of this bug. ***
*** Bug 316151 has been marked as a duplicate of this bug. ***
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.
Depends on: 211636
Assignee: layout.tables → nobody
QA Contact: madhur → layout.tables

Comment 24

6 years ago
and bug 211636 did fix this http://hg.mozilla.org/mozilla-central/rev/4738b38a2f3c
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.