none
IE8 rendering problem with border-collapse table style

    Question

  • When the HTML below is rendered by IE8 'finale', the rendering of the border on the right side of the tables is not continuous.  It renders OK in IE7 mode, and in FF3.  If the CSS line containing border-collapse is removed, it renders OK in IE8.

    Any idea what's wrong with this relating to IE8?  Or is there a problem with IE8?

    Thanks

    (is there a way to post screen capture images in this forum?)


    <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    table {border-collapse: collapse}
    </style>
    </head>

    <body>

    <table align=center style="background-color: beige; border: 1px solid black;">
    <tr><td align=center style="padding-bottom: 0.5em">Position under mouse:<td></tr>
    <tr><td align=center>[utm easting / northing]</td></tr>
    <tr><td align=center style="padding-left: 5px; padding-right: 5px; padding-bottom: 5px">
    [degrees latitude, longitude]</td></tr>
    </table>

    <br>

    <table align=center style="background-color: beige; border: 1px solid black; margin-bottom: 1em" cellpadding=5>
    <tr><td>Go to:<td></tr>
    <tr><td align=center><input type=text id=jump  value="Enter UTM or Degrees">
    <input type=submit value=Go onclick="goto();"></td></tr>
    </table>

    </body>
    </html>
    ~

    Saturday, March 21, 2009 10:04 PM

Answers

  • As someone else replied elsewhere, you haven't closed the first TD tags with a slash.

    My problem that led me here wasn't quite the same, I'd shrunk a 5-column table and forgotten to change the colspan=5 in the first row to fit, but the result was the same.

    It seems that while other browsers will make up for your mistakes and ignore the extra column created by buggy code, IE8 will not render the end border of the correctly formatted rows because, due to the fault in the line above, it assumes there is still one more column to go.

    Just thought I'd leave this here for anyone coming across the same issue as it's one of the top Google results for "ie8 border-collapse", so if anyone finds it, check your code for td terminations and misfitting colspans!

    • Marked as answer by Baffin Thursday, October 14, 2010 5:35 PM
    Thursday, October 14, 2010 11:47 AM

All replies

  • As someone else replied elsewhere, you haven't closed the first TD tags with a slash.

    My problem that led me here wasn't quite the same, I'd shrunk a 5-column table and forgotten to change the colspan=5 in the first row to fit, but the result was the same.

    It seems that while other browsers will make up for your mistakes and ignore the extra column created by buggy code, IE8 will not render the end border of the correctly formatted rows because, due to the fault in the line above, it assumes there is still one more column to go.

    Just thought I'd leave this here for anyone coming across the same issue as it's one of the top Google results for "ie8 border-collapse", so if anyone finds it, check your code for td terminations and misfitting colspans!

    • Marked as answer by Baffin Thursday, October 14, 2010 5:35 PM
    Thursday, October 14, 2010 11:47 AM
  • Thanks.  I should have run the HTML through a validator when it didn't work as expected, and before posting.  When the missing tag was put in, the layout was as expected.
    Thursday, October 14, 2010 5:35 PM