dt/dd in figure/details has killer rendering issues in ie6 and ie7

I'm promoting this to a top-level thread, to make sure it gets read by
people even if they've ignored the bikeshed threads elsewhere on
similar subjects.  Leif has discovered a *major* rendering bug
resulting from using dt/dd in figure/details that makes them virtually
unusable in IE6, IE7, and IE8-as-IE7.

Here is a minimal test-case demonstrating the error (cribbed from Leif's email):

<!doctype html>
<script> document.createElement("figure"); </script>
<style>
body{ background: silver; color: #800; margin: 0; text-align: center; }
figure { display: block; background: green !important; color: white
!important; text-align: center; border: black dotted 4px; }
dt, dd { border: #800 solid 4px; color: #88f; }
</style>
<p>Gray background represents the body elment</p>
<figure>
       <dt>dd/dt element inside figure</dt>
       <p>content inside figure</p>
</figure>
<p>content outside figure</p>
<p>more content outside figure</p>

Load that code in any legacy IE, or in IE8 with the IE7 rendering
engine or quirks mode.  You'll see that while the text color and
border of the <dt> are being transmitted to *all following content,
both within and without the <figure>*.  As well, the border on <dt>
envelops all further content, crossing the <figure>'s border.

Essentially, as soon as IE encounters a <dt> (or <dd>, the same thing
happens) outside of <dl>, it switches to a strange mode in its CSS
parser and subsequently treats all following content on the page as a
child of the <dt> for the purposes of most/all CSS properties.

Curiously, the DOM of the page is just fine (as exposed by IE8's
Developer Tools).  So it's just something in the styling subsystem
that is crafting a malformed view of the document.

However, this error is a completely killer of the
dt/dd-within-figure/details proposal.  The legacy problems are nearly
equal to those of <legend>.  I, for one, *certainly* expect to use set
borders and fonts on my <details> toggler, but if that will screw up
the entirety of the rest of my page in IE7 (or in IE8 if I get tagged
as needing compat mode for whatever reason), I simply won't use it
until IE7 is irrelevant.  I don't expect that day to come for years
yet.

It appears, then, that if we want <figure> and <details> to be usable
on any reasonable timeframe, the only solution is a new element, or an
attribute as I suggested elsewhere.  Pretty much all existing elements
have been exhausted at this point, I believe.

~TJ

Received on Friday, 18 September 2009 20:26:42 UTC