Oh, Fer Cryin’ Out Loud. Close the Darn Tag!

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

 

References

Reference: 

Oh, fer cryin’ out loud. Close the darn tag!