I was debugging some obscure problem the other day. For some reason the __doPostBack JavaScript function was not defined (or “undefined” in JavaScript terms ;) ). It wouldn’t be so suspicious if I was able to view the source of the page and see the declaration of __doPostBack routine.
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)
WRONG:
<script src=”test.js” />
RIGHT:
<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.