Thursday, April 26, 2012

Render Issue with IE 9 and HTML Layouts w/ Empty Elements

I ran across an interesting problem with IE 9 and empty HTML elements. I am maintaining a project that was originally maintained by a different consulting firm.

There was a requirement to update the footer of one of the websites. The footer layout ended up exploding on me and was stretched down the page. I only noticed this issue with IE 9.

I dug around through the source code a bit and noticed that there was an empty table element. It was like this <table />. Apparently, IE 9 did not handle the rendering of the page correctly with the trailing DIV element. The layout was perfect for all other browsers.

I removed the empty element and viola! The layout renders out appropriately. Take a look for empty elements if you encounter any strange rendering issues with IE 9.

No comments:

Post a Comment