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

Tab Atkins Jr. wrote:
> 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
>
>   
Oh, well thank goodness there's now a _real_ reason why dt/dd can't be used.

Shelley

Received on Friday, 18 September 2009 20:40:32 UTC