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:

< !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>

Example

Pay attention to the bottom border. Should be flush with the green cells.

Firefox 2.0

Firefox Render

Close Up:
Firefox Render (Close Up)

IE 6

IE Render

Close Up:
IE Render (Close Up)

IE 7

IE7 Render

Close Up:
IE7 Render (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: , , ,


10 Responses to “IE Table Border Bug?”

  1. Dao says:

    td { position: relative; }

  2. Gary van der Merwe says:

    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.

  3. Philippe says:

    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

  4. Neil says:

    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).

  5. Robert says:

    Philippe: I think that’s the best fix… Kinda stinks you have to do that.

  6. Joe says:

    the css td line that Dao put works. and simpler too.

  7. John taylor says:

    i agree, the css that Dao put works just dandy for me too.
    I just did a find and replace for

  8. Cam says:

    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

  9. Byron says:

    Slightly related…

    I had a table generated using JavaScript with the tds having a thin solid border on the top only, thus giving the appearance of rows split by thin lines with properly separated data fields w/ out any rendered separation (only whitespace). When the table loads js checks to see how many rows there are, and displays only the first 5 of them, thus the other rows are still there but the css display is set to none. There is then paging buttons in place which onclick iterate through the next 5 items in the table displaying them and hiding others. What was strange was that when the paging occurred in IE7 there were residual top-borders from the tds as the rows grew and shrunk in height to accommodate the different amounts of data. When I scrolled the page however these phantom borders would vanish, but then when I scrolled back up they would re-appear. Only when I set the border-collapse to seperate, and set the cellspacing=”0″ on the table did the table behave properly ( as suggested by Philippe).

    I am not sure why this occurred, but perhaps someone else out there has encountered this.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution.