V
validus
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
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