Closed Bug 363053 Opened 18 years ago Closed 18 years ago

CSS style, via "class", on "colgroup" element does not correctly apply to the columns.

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 285184

People

(Reporter: alokin1, Unassigned)

Details

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

A XHTML page has a class defined. This class is applied to a column containing <label> elements in the cells. If the class is applied via "colgroup", CSS properties will not apply to the content of the table cell, but will partially apply to the table cell (background color, for instance). If the class is applied on the table cell, directly, it will apply (cascade) to all elements in that table cell.

Reproducible: Always

Steps to Reproduce:
Load this test HTML.

<?xml version="1.0" encoding="iso-8859-1" ?>
<?xml-stylesheet href="#lable_style" type="text/css" ?>

<!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-US" lang="en-US">
<head>
	<title>Test page for Colgroup bug</title>
	<style type="text/css" id="label_style">
		.label_style {
			font-weight: bold;
			background-color: blue;
		}
		label {
			color: red;
		}
	</style>
</head>
<body>
	<form action="">
		<table>
			<colgroup span="1" class="label_style" />
			<tbody>
				<tr>
					<td class="label_style"><label>Good label</label></td>
					<td>
						<label>Normal label</label>
						<input type="text" name="text1" />
					</td>
				</tr>
				<tr>
					<td><label>Bad label</label></td>
					<td><input type="text" name="text2" /></td>
				</tr>
				<tr>
					<td><input type="submit" name="submit" value="OK" /></td>
					<td><input type="reset" name="reset" value="reset" /></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>


Actual Results:  
You will notice that the first (left) column has applied properties for background color. The first cell (row 1, col 1) applies all defined CSS properties on the content of the table cell (it has explicit class on it). The second cell (row 2, col 1) does not apply CSS of the class on the content (it is getting CSS via class on colgroup).

Expected Results:  
I would expect both cells to display with same properties.

Using DOM inspector I can see that property "class" is not passed on table cell if I use "colgroup". Maybe that is stopping the cascade of style to go as expected.

The workaround is to set class on table cells, explicitly. It is an ugly thing to do for large tables. I hope it is an easy to fix bug.

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