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

Tim Retout

Wed Jul 7 11:50:15 2010

To save people the trouble of reading through the Mozilla/Webkit bug reports from earlier comments, the consensus seems to be that IE8 is being awkward here.

In particular, http://www.w3.org/Bugs/Public/show_bug.cgi?id=9542 suggests that HTML5 will be updated to recommend the same thing that Gecko/Webkit do.
Zoffix Znet

Wed Apr 14 16:36:41 2010

Ummm.. Aryeh, I'm really confused by your bug report. Your <td>s and <th>s are not closed and I see nowhere where you are specifying th { text-align: center; }

The sample CSS sheet is just a sample, but in any case, browser's default rules would be overridden by inheritance in this case.

Gecko and WebKit do it properly. IE8 screws it u.
Aryeh Gregor

Wed Apr 14 14:39:04 2010

This is not a bug. IE8 is conforming to the specs here. It's other browsers that are doing weird non-standard things. I've filed bugs against Gecko and WebKit:

https://bugzilla.mozilla.org/show_bug.cgi?id=559382
https://bugs.webkit.org/show_bug.cgi?id=37590