Comparing browser border conflict resolution in the collapsing border model

Tutorial Categories:

Author: Deron Eriksson

Description: This CSS tutorial describes how to display empty table cells in IE7 and Firefox.

Tutorial created using: Windows XP

CSSW has 2 table border models: separate and collapse. The border model can be specified via the 'border-collapse' property. The 'separate' border model separates cell borders from one another, while the 'collapse' model can be used for continuity across cell borders.

The CSS 2.1 specification contains an example of border conflict resolution and defines what border should be displayed when multiple borders are present at the same place. As an example of this, a table may have a border color, and a cell may have a border color. Border conflict resolution refers to deciding which border should be displayed in the browser (the table border color or the cell border color).

Writing code that renders the same across different browsers requires that the different browsers follow the specification. Let's see how Firefox and Internet Explorer 7 compare with the border conflict resolution code example given in the CSS 2.1 specification. The style-test.html page below contains the CSS and HTMLW code given on page 278 of the PDF version of the CSS 2.1 specification.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
table {
	border-collapse: collapse;
	border: 5px solid yellow;
}

* #col1 {
	border: 3px solid black;
}

td {
	border: 1px solid red;
	padding: 1em;
}

td.cell5 {
	border: 5px dashed blue;
}

td.cell6 {
	border: 5px solid green;
}
</style>
</head>
<body>

<TABLE>
	<COL id="col1">
	<COL id="col2">
	<COL id="col3">
	<TR id="row1">
		<TD>1
		<TD>2
		<TD>3
	</TR>
	<TR id="row2">
		<TD>4
		<TD class="cell5">5
		<TD class="cell6">6
	</TR>
	<TR id="row3">
		<TD>7
		<TD>8
		<TD>9
	</TR>
	<TR id="row4">
		<TD>10
		<TD>11
		<TD>12
	</TR>
	<TR id="row5">
		<TD>13
		<TD>14
		<TD>15
	</TR>
</TABLE>
</body>
</html>

Below is a screen capture showing the border conflict resolution example in the CSS specification (left), Firefox (center), and Internet Explorer 7 (right). Notice that Firefox follows the CSS border conflict resolution rules, while Internet Explorer 7 does not. For example, the green solid border should take precedence over the dashed blue border, and the green cell border should take precendence over the yellow table border.

Comparing the CSS 2.1 border conflict resolution example with Firefox and Internet Explorer 7

For cross-browser rendering compatibility, browsers need to follow specifications, and since IE7 doesn't follow the specification (yet?), it's possible to run into cross-browser border conflict resolution problems.

AVAJAVA Web Tutorials

Total Categories: 24, Total Tutorials: 508

Cascading Style Sheets: 44 of 47 tutorials

style-test.html