Close the tags, but close them fucking correctly.

Or: Do not mix HTML with X(HT)ML

Yesterday, our team struggled over a broken layout on IE8, while it all works well on FF, IE9+, Chrome, and Safari.

Initially, we thought we could fix it easily adapting the CSS, e.g. replacing display:inline-block by floating elements. This did not work. So, we checked the HTML structure for some missing close tags...everything looked correct. We started to be dispaired, as our ideas faded, and our knowledge came up to an end. Luckily, I saw a small warning showing up in the developer console in Browser Mode IE10 (not IE8), which seemed quite strange to me, as I did not find any problem within the referenced code.

The complete message (in portuguese) is the following: HTML1523: Marca de fim com sobreposição. As marcas devem ser estruturadas como "<b><i></i></b>" em vez de "<b><i></b></i>". It complains allegedly overlapping tags within the following HTML:

<div class="login">
    <asp:Label runat="server" ID="lnkLogin">Login<span class="seta-baixo"/></asp:Label>
    <asp:LinkButton runat="server" ID="lnkLogout">Logout</asp:LinkButton>
</div>

Do you see any problem?

Syntactically, everything seems fine, or not? Well, there is a small detail. I remembered that once I had problems with inline closed script tags. That is, when a script tag is closed in XHTML/XML manner, the script is not loaded correctly and cannot be used. That is because syntax of two similar but not identical languages are mixed up. Just to remember:

HTML is not XHTML(nor XML)!

You will run into problems, when mixing up XML-Syntax in HTML. Some browsers can deal with it, but others not. The solution was really simple. We closed the span tag the correct HTML way. You could say "Use the correct doctype definition to avoid the problem", and you would be right. But it is more bulletproof to use the HTML style, as it is also valid for XML!

<div class="login">
    <asp:Label runat="server" ID="lnkLogin">Login<span class="seta-baixo"></span></asp:Label>
    <asp:LinkButton runat="server" ID="lnkLogout">Logout</asp:LinkButton>
</div>

With the correction the layout works on all browsers as expected, even on IE8.

So, before you get nuts, and spent valuable time, remember to correctly close tags in HTML style.