So, I’m spending part of my Friday at work like I usually do, working on prototype applications or product ideas I have. I’m working inside my XML Editor (OxygenXML 8) to validate my layout and I hit the pretty print button. All hell breaks loose with my layout. Firefox and Safari both render the layout exactly the same in the broken version, which told me that it probably wasn’t a “bug” but a misunderstanding of the spec on my part.
Here’s a sample of what happened. I went from this:
to this:
After several hours of close reading, double-checking everything, and generally pulling my hair out, I found out that the problem is that the XML editor turned an empty div in my code into an empty XML element. In other words, the only change to the source was from:
<div class="someText">an item</div>
<div class="toBeFilled"></div>
</div>
to this:
<div class="someText">an item</div>
<div class="toBeFilled"/>
</div>
All of this stems from the fact that XHTML uses XML semantics without a real XML parser. The bottom line is that unless the element is defined in the XHTML DTD as EMPTY, you shouldn’t use the empty element notation. It’s better and correct to leave it as separate open and close tags. Many developers have run into similar issues with the script tag, which also has some weirdness when used in the empty element notation. This is why, apparently, browsers do this. I don’t know if they handle it well, though.
Continue reading if you want more information and some links on the background for this.
(Click here to read the rest of this post)