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

RESOLVED DUPLICATE of bug 285184

Status

()

Firefox
General
RESOLVED DUPLICATE of bug 285184
12 years ago
12 years ago

People

(Reporter: Nikola Milutinovic, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

12 years ago
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.

Comment 1

12 years ago

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