3 replies [Last post]
validus
Offline
newbie
Last seen: 14 years 6 weeks ago
Joined: 2006-02-28
Posts: 1
Points: 0

I've having some problems working around border conflicts in IE6.
I suspect IE is using the wrong order to determine which layer wins the conflict. According to the specification (http//www.w3.org/TR/REC-CSS2/tables.html),

"If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table."

I have a table where I want a border outlining the table edges.
Then only on specific rows, we want a top and bottom border but
nothing on the sides. Visually we are in essence trying to make
it look like 2 tables when it is really 1. It should look like 2 boxes
with a whitespace gap between. This renders like we want in
Firefox but in IE6, it seems to let the table style override the cell style.

Consider the following
========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http//www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<title>tst.html</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<STYLE type="text/css">
table
{
border-collapse collapse;
border 1px solid black;
}
td.border1
{
border-top 1px solid black;
border-bottom 1px solid black;
border-left hidden;
border-right hidden;
}
td.border2
{
border-top 1px solid black;
border-bottom 1px solid black;
border-left 1px solid white;
border-right 1px solid white;
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR><TD>Line One</TD></TR>
<TR><TD>Line Two</TD></TR>
<TR><TD class="border2">Line Three</TD></TR>
<TR><TD>Line Four</TD></TR>
<TR><TD>Line Five</TD></TR>
</TABLE>
</BODY>
</HTML>
========================================

Can anyone shed any light on this or suggest a workaround? The
problem exists in IE whether we use the border1 or border2 class.
I was hoping specifying a white border would paint over the
existing black border but it does not. Thanks in advance.

cheers,
validus

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 29 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

** Border conflicts in IE **

Seems like you have done more investigation into this area than anyone else on these forums.

If you are convinced its a problem, check it out in IE7 beta and then report to the IE7 team as a bug. You never know they may even look at fixing it :?

Or visit CSS Discuss and ask your questions on their mailing list.

Either way, please report your findings back here. Laughing out loud

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 5 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

** Border conflicts in IE **

Interesting one. Did not get it to work without adding an inner element to style on. It's a fake, and it leaves some edge pixels out.

<!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">
<head>
	<title>tst.html</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
table {
	border-collapse: collapse;
	border: 1px solid  black;
	}

td { padding: 0; }

td p.border {
	border: 1px solid;
	border-color: black white;
	position: relative; /* to allow for negative margining over the edge*/
	margin: 0 -1px; /* negative value depends on the td padding*/
	zoom: 1; /* haslayout */
	padding: 0;
	}
/*]]>*/
</style>
</head>

<body>
	<table>
		<tr>
			<td>Line One</td>
		</tr>

		<tr>
			<td>Line Two</td>
		</tr>

		<tr>
			<td><p class="border">Line Three</p></td>
		</tr>

		<tr>
			<td>Line Four</td>
		</tr>

		<tr>
			<td>Line Five</td>
		</tr>
	</table>
</body>
</html>

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 5 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

** Border conflicts in IE **

Sorry. Edge pixel problem can be solved with using background.

<!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">
<head>
	<title>tst.html</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
table {
	border-collapse: collapse;
	border: 1px solid  black;
	}

td { padding: 0; }

td.borderhor { border: 1px solid black;}
	
td p.bordervert {
	background: white;
	position: relative; /* to allow for negative margining over the edge*/
	margin: 0 -1px; /* negative value depends on the td padding*/
	zoom: 1; /* haslayout */
	padding: 0;
	}
/*]]>*/
</style>
</head>

<body>
	<table>
		<tr>
			<td>Line One</td>
		</tr>

		<tr>
			<td>Line Two</td>
		</tr>

		<tr>
			<td class="borderhor"><p class="bordervert">Line Three</p></td>
		</tr>

		<tr>
			<td>Line Four</td>
		</tr>

		<tr>
			<td>Line Five</td>
		</tr>
	</table>
</body>
</html>