W3C home > Mailing lists > Public > public-html@w3.org > September 2009

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

From: Leif Halvard Silli <xn--mlform-iua@xn--mlform-iua.no>
Date: Sat, 19 Sep 2009 15:11:41 +0200
Message-ID: <4AB4D88D.300@xn--mlform-iua.no>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: public-html@w3.org, Shelley Powers <shelleyp@burningbird.net>
Tab Atkins Jr. On 09-09-18 22.25:

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

The problem can be cured with a simple - script free - hack:

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

<!--[if lt IE 8]><object><!<![endif]--></head><body>

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


* The "<!<!" in "<!<![endif]-->" is intended and necessary.
* In IE8 and the rest the hack is seen as a comment.
* In IE6/IE7/IE8-as-IE7 the OBJECT tag causes two effects:
   a)  <dt></dt> & <dd></dd> gets closed even outside <dl></dl>.
   b)  the OBJECT that it creates disappears from the DOM
       and thus shouldn't affect CSS selectors.
* Negative side effects: Not aware of any (yet).
* </head><body> = perhaps not strictly part of the hack, but has 
other good effects, such as preventing unknown first-child 
elements from being swallowed by the <head> element in any way.

I also made a Live DOM Viewer test [1]. (Or more precisely, I 
would not have been able to understand the details without LDV!)

[1] http://software.hixie.ch/utilities/js/live-dom-viewer/saved/239
leif halvard silli
Received on Saturday, 19 September 2009 13:12:22 UTC

This archive was generated by hypermail 2.3.1 : Monday, 29 September 2014 09:39:08 UTC