It turned out some iframe break the whole thing.
Consider the following html (notice that the iframe is in minimized form):
<div>I am before the iframe</div> <iframe src="http://www.telerik.com" /> <div>I am after the iframe</div>
In that case the second div was not rendered at all. IN ALL BROWSERS!!!
First I thought it was one of “those” Internet Explorer quirks but FireFox reported the same behavior, as well as Opera and Safari. Firebug showed that the parser had stopped after the iframe tag – the second div was not in the DOM tree. I began to suspect that the problem sat behind the keyboard. I validated the markup and the W3C validator reported the following:
End tag for "IFRAME" omitted, but its declaration does not permit this.
Hm. Well indeed it must be me. I checked the spec to find the following statement:
“Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).”
This would mean: “close your iframes properly or the browser will punish you”.
The fix was really simple:
<iframe src="http://www.telerik.com" ></iframe>
A similar problem occurs if you use the minimized form of the script tag (however it is IE only issue)
<script src=”test.js” />
<script src=”test.js” ></script>
In a word validating your markup can save you some precious time. However I wouldn't mind if browsers generated errors in case of invalid markup.
Stefan Rahnev (@StDiR) is Product Manager for Telerik Kendo UI living in Sofia, Bulgaria. He has been working for the company since 2005, when he started out as a regular support officer. His next steps at Telerik took him through the positions of Technical Support Director, co-team leader in one of the ASP.NET AJAX teams and unit manager for UI for ASP.NET AJAX and Kendo UI. Stefan’s main interests are web development, agile processes planning and management, client services and psychology.