It's Movember. Movember is a yearly, world-wide fundraiser for research of men's health problems, such as prostate cancer and depression. Your donation will count, even if it's just $1. Click here to donate.
Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

Non-Inherited TH Text-Align Bug

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

Due to the nature of the bug, fixed 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;
}

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.

Comments

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my books: