Posted by Ben C on 01/26/08 12:42

On 2008-01-26, Ben C <spamspam@spam.eggs> wrote:
> On 2008-01-26, Knut Krueger <knut.krueger@usa.com> wrote:
>> Hi to all,
>> There is an short example in the German selfhtml.og pages:
>>
>><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
>><html><head><title>display</title>
>><style type="text/css">
>> div.table { display:table; border-collapse:collapse; }
>> div.tr { display:table-row; }
>> div.td { display:table-cell; border:thin solid red; padding:5px; }
>></style>
>></head><body>
>>
>><div class="table">
>> <div class="tr">
>> <div class="td">ich</div>
>> <div class="td">bin</div>
>> <div class="td">eine</div>
>> <div class="td">Tabelle</div>
>> </div>
>></div>
>>
>></body></html>
>>
>> It is working fine with Firefox and Opera, but not with IE.
>> The are cells are horizontal ordered, in IE they are vertical ordered.
>>
>> Does anybody know why?
>
> You can't just put divs into trs _even if_ they are display: table-cell.
>
> The HTML validity rules are applied independently of CSS (and CSS
> doesn't have the same kind of validity rules anyway-- an element that's
> display: table-cell can be nested inside one that's display: inline if
> you like).
>
> I say "the HTML validity rules". That's not what browsers actually
> apply, but if you write invalid HTML, especially when table, tr and td
> elements are concerned, the browser's parser is likely to rearrange
> things in an unpredictable way.

Sorry, I misread your example. They're all divs, and there's nothing
invalid there.

The reason is just that IE doesn't support display: table-cell. If you
want tables in IE you have to do HTML tables.

[Back to original message]