Home/ Questions/Q 1092771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:43:57+00:00

I have the weirdest bug ever… I’m experimenting with display: table, and my proof

  • 0

I have the weirdest bug ever… I’m experimenting with display: table, and my proof of concept works on the very first try after opening a new process, but any subsequent reloading of the page breaks the design. Here is the simple HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        .container {
            display: table;
        }

        .row {
            display: table-row;
        }

        .cell {
            display: table-cell;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            padding: 1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="cell">CELL A</div>
            <div class="cell">CELL B</div>
            <div class="cell">CELL C</div>
        </div>
    </div>
</body>
</html>

And here is the expected result, this is what I get after loading the first time.

alt text

Now that’s what I get after reloading the page, with F5:

alt text

It’s insane!!!

Can someone please try it and let me know how it comes out for them? Thank you. I hope I will not have killed myself by the time I read the solution 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It turns out that, as suggested by some, IE’s compatibility mode was triggered somehow.

    I found out that it’s because I’m running the page on an Intranet, and by default compatibility mode is enabled for Intranet websites.

    This can be disabled by going to Tools > Compatibility View Settings and unchecking the Display intranet sites in Compatibility View box. Of course this is not something you necessarily want to ask all your users to do, so it was suggested to me to add

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    in the header, which works great.

    More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

    • 0