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

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>


Notes:

* 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