IE8 Doubling Heights And Borders And Such

Well I had yet another problem with IE today, but this time it was only happening in Internet Explorer 8. I had a header and footer where the height was specified as 100px, but the browser was doubling it… and not just to 200px, but it was practically creating a copy, with the top border being displayed at the top and straight through the middle at 100px.

Well, in both areas I had some anchors like this:

<a name="header" />

Yeah, IE8 doesn’t like self closing tags. I have seen this issue before in IE 7 (which was working for me this time). You need to actually add a closing tag to all self-closed tags (although I think it works okay on <br />) like this:

<a name="header"></a>

That worked for me. Hopefully Microsoft will finally get this right in IE9.