Broken styles in List view on Internet Explorer 11.

[ghost]

Currently, IE cannot handle the responsive wireframes we use. An example:

The IE display:

The same URL in Windows Firefox 33.0a2 (Aurora):

As much as I hate IE-specific scripts, @stanzheng: I should have never asked to get rid of the IE-specific code in #22. Probably need to add it back in.

[jalbertbowden]

are you sure this wasn't in default compat mode?

[ghost]

I thought the icon or mode would show in the omnibar if I put it in compatibility mode. I don't know much about compatibility mode in IE11, haven't seen a way to use it, really. Does it even exist?

EDIT: Also, while not IE11, this page doesn't even show on IE for 360.

[jalbertbowden]

i think ie11 dropped the icon. not sure though. check your settings. but again, its on by default...

EDIT: pretty sure i was wrong about compat view. my bad

[ghost]

27 did not close this. Damn autoclose.

[jonathansampson]

@ryayak1460 The problem here appears to be invalid markup per the expectations of purecss.io. For instance, your grid is currently setup like this:

<div class="pure-g">
    <script id="..." type="..." />
    <script id="..." type="..." />
    <ul>
        <script id="..." type="..." />
        <script id="..." type="..." />
        <a class="ember-view" id="..." href="...">
            <li class="record pure-u">...</li>
        </a>
        <script id="..." type="..." />
        <script id="..." type="..." />
        <a class="ember-view" id="..." href="...">
            <li class="record pure-u">...</li>
        </a>
        <!-- continued -->
    </ul>
    <script id="..." type="..." />
    <script id="..." type="..." />
</div>

Instead, purecss.io encourages the following format:

<div class="pure-g">
    <div class="pure-u-1-3">...</div>
    <div class="pure-u-1-3">...</div>
    <div class="pure-u-1-3">...</div>
</div>

This non-conformance causes issues with the way display: -ms-flexbox is rendering the .pure-g contents. Bringing the structure back into conformance appears to resolve all of these issues.

To demonstrate the results of restructuring your tree, run the following from your console in Internet Explorer while on the #exhibits view:

(function () {

    var frag = document.createDocumentFragment(),
        grid = document.querySelector( ".pure-g" ),
        prev = document.querySelectorAll( ".pure-u" );

    for ( var newEl, i = 0; i < prev.length; i++ ) {
        prev[ i ].parentElement.removeChild( prev[ i ] );
        newEl = document.createElement( "div" );
        newEl.className = "record pure-u-1";
        newEl.innerHTML = prev[ i ].innerHTML;
        frag.appendChild( newEl );
    }

    grid.appendChild( frag );

}());

By restructuring your code to not only be valid, but in compliance with purecss.io expectations, you avoid the need altogether to have separate instructions for Internet Explorer.

I should mention that I am a Program Manager on the Internet Explorer team. I love the idea behind this site, and I'm happy to answer any questions you might have about achieving better cross-browser compatibility in the future.

I hope this helps!

[ghost]

Absolutely @jonathansampson, I'll take a look this evening, thanks! Just may have difficulty as I run entirely on free software and have no access to genuine IE11, excluding under Wine, so I have no good method to test out any implementation changes at the moment. I will let you know when I can test on a Windows machine!

[jonathansampson]

@ryayak1460 You can download free Virtual Machines of Windows with Internet Explorer 11 at http://modern.ie, as well as get three free months of in-browser virtualization through http://browserstack.com. Let me know if you need any assistance with either of those.

[ghost]

I managed to at least improve the layout using your suggestion. As you've probably seen, I use Ember.js for the main markup templating, hence all the script and anchor tags in the computed markup.

A colleague had done the PureCSS work, but I had no knowledge of how to actually use the library for assisting with responsive design, much less the mental map for using their Grid library. Using each record as a Grid with the specified columns, however, worked out perfectly. I had previously seen the Grids as rows and columns, not just columns as Yahoo! intended them. Templating out each row as a Grid with a 1/6 column and a 5/6 column seems to work just fine. :smiley: Thank you once again, @jonathansampson!