5

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 :-)

md1337
  • 1,440
  • 2
  • 16
  • 32
  • 1
    @md1337: consider that IE8 has been out for a while. Why are you the first person to see this bug? – John Saunders Sep 21 '10 at 21:40
  • Works fine for me. (WindowsXP, 8.0.6001.18702) – Bob Kaufman Sep 21 '10 at 21:40
  • 5
    I would highly discourage the display:(table/table-row/table-cell) CSS property. It is not well supported and is bound to have quirks. Honestly if what you are displaying is tabular data, *then use a table*. Tables are only evil when used for *layout*. – riwalk Sep 21 '10 at 21:41
  • Check for compatibility mode. IE8 should render display: table. Maybe you should simply use a table? – taylorjes Sep 21 '10 at 21:42
  • Oh, and could not reproduce (http://xkcd.com/583/) – riwalk Sep 21 '10 at 21:43
  • 1
    @md1337 It doesn't matter if it is what you are asking. You are using error-prone CSS and complaining that you are getting an error. Just don't use error-prone CSS in the first place. – riwalk Sep 21 '10 at 21:51
  • @md1337, I get the same thing in design view even after using " – NoChance Mar 06 '13 at 06:55

2 Answers2

18

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

md1337
  • 1,440
  • 2
  • 16
  • 32
6

The problem when the browser is in compatibility view. (as suggested by taylorjes)

When the page is displayed in normal view, the cells are horizontal. When displayed in compatibility view, the cells are vertical.

As I said in my comment, I would highly discourage the display:(table/table-row/table-cell) CSS property. It is not well supported and is bound to have quirks.

Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout.

riwalk
  • 14,033
  • 6
  • 51
  • 68
  • @md1337 - You don't. You write your code to be compatible across multiple browsers (thus my remarks discouraging the use of those CSS properties). – riwalk Sep 21 '10 at 22:12
  • @md1337. Oh, and before you think otherwise, the down vote was not from me. It is a legitimate question, even if the answer is not what you wanted ;) – riwalk Sep 21 '10 at 22:13
  • 7
    `alert(document.documentMode)` will tell you `8` or `7` (or `5` for quirks mode). Use `` to force IE to use the ‘best’ Standards Mode it has available. Otherwise you may fall victim to Compatibility Mode if requested, defaulted or accidentally-clicked by the user, or if Microsoft puts you on the Compatibility list. – bobince Sep 21 '10 at 22:19
  • 3
    @bobince: Great comment! You saved the day. – md1337 Sep 21 '10 at 22:27