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.
I thought the A tag was special and always requires a closing tag. Closing a tag with slash close bracket thing is just for everything else. So this is probably actually a case of the other browsers allowing you to do something you shouldn’t be doing rather than IE being wrong. The a name is supposed to scroll the browser to focus on the text or whatever that’s inside the [a name=whatever]some text[/a] so it should focus on “some text”. Generally people don’t use it that way and just leave it blank [a name=whatever][/a] but trying to make it just one element [a name=whatever/] is actually counterintuitive if you understand what the meaning of the tag is.
See also http://stackoverflow.com/questions/3504007/single-html-anchor-tag-actually-renders-twice-screenshot. Other browsers will do strange things like rendering the A tag twice if you try to make it a single tag…maybe not when using it for a name, but certainly when using it for a link like this guy tried to do.
That does ring a faint bell actually – thanks! And the link is also helpful.
In fact my previous answer is incomplete or wrong, because there are other tags that make no sense as self-closing tags. [b]bold text[/b] [b/] would make no sense. Something is needed inside. Self-closing tags are just a fad, like a buzzword thing. I use them for [br/] and [hr/] but that’s about it. If you want to use [p] instead of [br/] you might try [p/] instead of [p][/p] but I’m not really sure even that actually works. [br/] simply represents a line break, whereas [p] represents a paragraph, so conceptional I would think it should always be two tags. [hr/] just represents horizontal line, so obviously needs no closing. In fact, [br] and [hr] work fine without the closing slash in HTML. Really self-closing tags are only needed to update the single-tag entities like br and hr for XML or XHTML which requires tags to be closed even if they are only one tag. So for XHTML [br] must become [br/] and [hr] must become [hr/] because XHTML requires a closing (even where HTML wouldn’t). But it makes no sense to think that [b][/b] can now become [b/] or [i][/i] become [i/] or [a][/a] become [a/] or [script][/script] become [script/] or [style][/style] become [style/]. Selfclosing is for tags that don’t technically need to be closed not for those that do. All the fancy HTML sites that are supposed to teach you this don’t know how to put it in plain English I guess.
Good points, and you’re right. As you say, we used to manage with [br] perfectly well until people felt this burning urge to turn HTML into XML.
Thank you so much — I had exactly the same problem, and initially got lost in a great deal of advice about implicit ‘hasLayout’ properties before finding this page. You solved my problem immediately.
You’re welcome!