Last week, I posted about how Internet Explorer doesn't handle fieldsets very well. I focused a lot on the styling issues, which have been covered before, and realized I may not have touched appropriately on the second issue.

As I said before, any content before the legend tag within a fieldset, IE will render outside the fieldset. This isn't entirely IE's fault, as it is technically an error condition. Personally, I think HTML 5 should be modified to not require the the legend to be the first (non-text) child of a fieldset, but in the meantime, Internet Explorer's failure mode leads to some interesting side-effects.

This is because, while the visual representation of that element is outside the fieldset in question, the DOM places the element within the fieldset. This can lead to some strange behaviour in situations like the following:

Viewed in Internet Explorer, each time you click the button, you'll see the color of the paragraph shown both inside and outside the fieldset change. If you do query selectors, you'll find two paragraphs within the fieldset, even though only one is rendered inside. This disconnect between the DOM and the visual representation of the page has some interesting implications, and it shows, in my opinion, a particularly poor choice in handling the error condition on the part of the IE team.

Unless the W3C modified the HTML standard to be more flexible about Legend placement (or at least strictly defines failure modes), it'll be important to always make sure that the legend is the first item in the fieldset, which is mostly only a problem when modifying the legend via JavaScript.