I’ve been working on a side project for a while now. A big AJAX-y web application with tons of moving parts. Last night I was getting ready to publish a version for the client to review when I noticed something odd when viewing in Internet Explorer 8. It started out peculiar, turning out to be extremely frustrating.
How a portion of the page looked in Firefox 3.5
And how the same page looked in Internet Explorer 8 (with and without Compatibility Mode) Notice how the font style changes at “State”.
I spent a good amount of time trying to figure out what the heck was going on. Thinking I had hosed a style somewhere, I opened up Firebug and inspected the element. This is what I saw. Ok, looks normal to me.
But using Internet Explorer’s Developer Tools, I saw this. Notice how the span does not close, and the rest of the elements are a child of the span tag.
So, going over the HTML in the ASPX page, I find this, I hadn’t closed the span tag properly. DOH!
Fixing the markup like such, makes the page render properly.
So, is this a bug or a feature of Internet Explorer 8? Or, a bug or a feature of Firefox 3.5? For me the moral of the story is to make sure that all my block element tags are properly closed.
Time to code,
James