Question

I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.

#CheckInformation {
  border: 1px solid #aaa;
  padding: 10px;
  background-color: #E2F0F9;
  margin-top: 15px;
}
#CheckInformation #PropertyAddress {
  font-size: .87em;
  width: 200px;
  float: left;
  text-align: center;
}
#CheckInformation .label-column {
  width: 100px;
}
#CheckInformation .payto-col {
  width: 570px;
}
#CheckInformation .line {
  border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
  width: 540px;
}
#CheckInformation #Address {
  width: 200px;
  height: 45px;
}
#CheckInformation #Memo {
  width: 400px;
}
#CheckInformation #NumberWords {
  margin: 3px;
  font-style: italic;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
  <table>
    <tr>
      <td class="top" colspan="2" rowspan="2">
        <div id="PropertyAddress">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
      <td class="text-right label-column">Date</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td class="text-right">Check Number</td>
      <td>
        <input type="text"></input>
      </td>
    </tr>
    <tr>
      <td>Pay to</td>
      <td class="payto-col line">
        Some person
      </td>
      <td class="text-right">Amount</td>
      <td class="text-right line">
        70.00
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="line" colspan="3">
        <div id="NumberWords">Zero Dollars & Zero Cents</div>
      </td>
    </tr>
    <tr>
      <td class="top">Address</td>
      <td colspan="3">
        <div id="Address">
          1234 Main St
          <br />Some city, State 50000
        </div>
      </td>
    </tr>
    <tr>
      <td>Memo</td>
      <td colspan="3">
        <input type="text"></input>
      </td>
    </tr>
  </table>
</div>

It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.

Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63

Anyone else see the issue?

Answer 1

Adding table{border-collapse:separate} seems to fix it but I don’t know why. I’ll update the answer if I figure out more.