Question

I’m having a problem with the following html/css:

http://jsfiddle.net/QYVPb/

<table cellpadding="0" cellspacing="0" style="background:#FAFAFA; border:1px solid black">
  <tbody>
    <tr>
      <td style="height:100%; padding:5px">
        <table cellpadding="0" cellspacing="0" style="table-layout:fixed; height:100%">
          <tbody>
            <tr>
              <td style="padding:10px; font-weight: 700; text-align: center; background: #E0E0E0">Some Text</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="height:100px; padding:10px">This cell controls the height</td>
    </tr>
  </tbody>
</table>

The doctype is HTML 5.

The html renders the way I’d like to in Firefox (9.0 beta).

In IE, Opera, Chrome & Safari, the background of the “Some Text” cell does not fill the containing cell.

The structure of the html is fairly inflexible – this html is a simplified structure of a much larger application.

I’m hoping for some simple CSS to fix the problem.

Answer 1

Actually Firefox is not rendering correctly: CSS height property will only work if the parent element has a height declared.

You could try the following workaround, which sets the bgcolor on the parent td:

http://jsfiddle.net/QYVPb/2/