Sherman's Tech Talk: January 2014

Tuesday, January 21, 2014

Internet Explorer 8 not displaying the "display:table" property

I recently ran into a problem in which IE 8 was not rendering a table structure that I created using <div> elements. A simplified example of what I'm talking about is as follows:

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">Column 1</div>
        <div style="display:table-cell">Column 2</div>
        <div style="display:table-cell">Column 3</div>
    </div>
</div>

Now, IE 8 supports this capability so I have the feeling that the users reporting the issue may have had Internet Explorer running in a compatibility mode to support a lower version. Fortunately, I was able to resolve the issue by add the following <meta> element to the <head> element of the master page that I was using:

<head id="Head1" runat="server">
    ...
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    ...
</head>

In case you're curious, this <meta> tag, specifically "IE=Edge", tells IE to utilize the latest version of Internet Explorer available.