HTML5 figure and details do not break in IE
While this blog ought to be written in Dutch, I'm going to make an exception today because I'll address a global issue in this post. It's about the future of the World Wide Web.
As the title suggests, I'm going to talk about the figure and details elements in HTML5, the next version of HTML. The contents of these elements consist of dt and dd elements: dt for the caption, dd for the actual content.
Recently this content model has been criticized because there appeared to be a styling flaw in Internet Explorer 6 and 7. To be precise, the style of the last dt or dd element was leaked to the parent because IE ignored the closing tags of dd and dt (as well as the unknown figure and details tags of course).
These were said to be "killing rendering issues". People suggested modifying the specification or even dropping the figure and details elements completely. People introduced workarounds using Conditional Comments, JavaScript, unclosed object elements and worse.
I conclude I am really awesome since I discovered much simpler solution that is valid HTML5, does not require JavaScript, does not require Conditional Comments and is very short. It's hard to believe that no one thought of my solution before.
You'll agree with me after I told you to put the details or figure element inside a div element. Yes, it's that simple! The closing div tag will effectively stop the style leek.
I've set up a demonstration for those who don't believe me. I successfully tested it in IE7. It also keeps working if the order of the dd and dt elements is reversed.
Now stop trying to get the HTML5 specification changed because the current specification is perfectly backwards compatible as you can see.