hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

text-align value of ascendant isn’t inherited by the TH element

Date of the Tutorial

Wed Aug 12 20:06:42 2009

Description

Not a "biggie" bug; the inheritable text-align property is not inherited by the ' element"><th> element. Here's the demo:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<table>
<tr>
    <th>Foo</th>
    <th>Bar</th>
</tr>
<tr>
    <td>Foo</td>
    <td>Bar</td>
</tr>
</table>

CSS Code:

table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
}
table {
    text-align: right;
}
td, th {
    width: 100px;
}

The text in ' element"><th> element is center-aligned in IE8 whilst it should be right-aligned since the text-align should be inherited from what we've set on ' element"><table>.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Wed Aug 12 20:28:13 2009

Fixed Versions

All of the affected

Description

The fix is trivial - all that IE needs is an extra kick in the butt:

HTML Code:

<table>
<tr>
    <th>Foo</th>
    <th>Bar</th>
</tr>
<tr>
    <td>Foo</td>
    <td>Bar</td>
</tr>
</table>

CSS Code:

table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
}
table {
    text-align: right;
}
td, th {
    width: 100px;
}
th {
    text-align: inherit;
}

By reminding IE that text-align property is inherited by setting th { text-align: inherit; } we can fix this silly bug.