IE Table Border Bug?
I encountered this the other day. Firefox, Safari and Opera do what I expected and believe to be correct. I’m curious if anyone can explain this, or knows of a workaround that “doesn’t suck”. Take the following testcase:
HTML
-
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-
<HTML lang="en">
-
<head>
-
<title>IE Table Border Bug</title>
-
<meta HTTP-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<style type="text/css">
-
table {
-
background-color: green;
-
border-collapse: collapse;
-
border-spacing: 0px;
-
}
-
table td {
-
width: 100px;
-
border-bottom: 3px solid red;
-
}
-
table td.strip {
-
background-color: #fff;
-
border-bottom: 3px solid #fff;
-
}
-
</style>
-
</meta></head>
-
<body>
-
<table>
-
<tr>
-
<td> Test</td>
-
<td class="strip"> Test</td>
-
<td> Test</td>
-
</tr>
-
-
</table>
-
</body>
-
</html>
Pay attention to the bottom border. Should be flush with the green cells.
Firefox 2.0
Close Up:
IE 6
Close Up:
IE 7
Close Up:
Strange, but interesting. Excuse the poor quality of the screenshots. I cut these up really quick. Perhaps this weekend I’ll do a nicer job.
Tags: bug, html, ie, microsoft
April 5th, 2007 at 4:33 am
td { position: relative; }April 5th, 2007 at 4:44 am
Here is a work around (kind of sucks.)
http://garyvdm.googlepages.com.....derBug.htm
It seems like when border-collapse is collapse, the background is rendered under the right and bottom border, and the default border is 1px transparent.
My workaround is to set the offending borders to the color of the next sibling cell.
April 5th, 2007 at 9:02 am
remove the border-collapse:collapse.
use the cellspacing=”0″ attribute on the table (yes perfectly valid)
border-collapse never works correctly on iExploder.
http://dev.l-c-n.com/iExploder7/table-robert.html
April 5th, 2007 at 9:02 am
You can also work around the problem by turning off border-collapse (but I couldn’t persuade IE6 to turn off its cell padding except by using HTML).
April 5th, 2007 at 10:03 pm
Philippe: I think that’s the best fix… Kinda stinks you have to do that.
June 30th, 2007 at 11:38 am
the CSS td line that Dao put works. and simpler too.
July 9th, 2007 at 10:29 am
i agree, the CSS that Dao put works just dandy for me too.
I just did a find and replace for
March 13th, 2008 at 3:34 pm
I want to get rid of “border-collapse: collapse;” but can not get it done. I am using IE6.
table.coll
{
border-spacing:0px;
border-width: 0px;
cellpadding: 0px;
cellspacing: 0px;
}
table.sep
{
border-collapse: collapse;
}
Peter
Griffin
Lois
Griffin
Peter
Griffin
Lois
Griffin
March 13th, 2008 at 3:37 pm
http://www.w3schools.com/css/t.....r-collapse
I copy code from upper link.