I apologise to my non-techie readers. But this issue cost me a couple of hours of my life, and I can’t find anything about it on the web. So I feel morally obliged to write something.
Yesterday a kind reader drew my attention to some mysterious behaviour in the new Mithras pages. Lines that contained a hyperlink were being split. <div> tags were mysteriously moving to the next column. Unordered list tags (<ul>) were displaying an extra blank line at the top.
After some debugging, and removing all the styling, I got the code necessary to produce the problem down to a small fragment:
<!doctype html> <html><head> <title>some title</title> </head> <body><a name="top"/><ul> <li><a href="#second_header">1. second header</a></li> <li><a href="#third_header">2. third header</a></li> </ul></body> </html>
And this gave the result:
And why, oh why, does this very standard boiler-plate code give an extra “dot” in IE9? It doesn’t in Chrome or Firefox.
Believe it or not, the answer is the <a name… /> tag, what is called the “destination anchor”. If you change it thus:
<a name="top"></a>
It all works! You get what you should get, this:
I am quite frustrated about this. I mean, did Microsoft actually test IE9 at all?
Once I made this change, all — and I mean all — the weird formatting errors went away. They had nothing to do with CSS, or <div> tags, or inline-blocks.
HTML has got really very complex these days. Doing CSS is almost impossible unless you do it all the time; most people just copy and paste bits. It is all so far away from the days when HTML won acceptance by being easy.
UPDATE: I think that the problem is that IE9 simply supposes that the “<a name=…>” tag has not been ended. It just ignores the “/>”. So it carries on, rendering the HTML, until it encounters another anchor tag. This will most likely be a link: “<a href=…>. At this point, it throws a paragraph break (why?), resets itself and carries on. And this is why you get random problems further down in the HTML.
The reason why my ordered list, above, had an extra “dot” is that the entries in the list were hyperlinks. So IE9 found the start of the first one, went “eek! panic! panic!”, threw a paragraph break (thereby splitting the list into two and creating an empty entry) before gathering itself up and carrying on. The problem does NOT manifest unless the ordered list contains the links.
For some reason this can also affect DIV’s and IMG tags, but I have not sought to bottom out how and why.