[HELPED] Browser Rendering Compatibility ?

[mwmayer4]

Has anyone found a good resource site(s) for help in handling the way IE, Firefox, etc will handle CSS differently? In a perfect world, all Valence users would use Chrome, however, when you have apps that allow users from the outside world, most users, unfortunately will be using IE. I'm having a very difficult time trying to figure out how to code the CSS to handle it.

A good example of this would be the following data view that displays thumbnail images. It renders beautifully in Chrome, Safari & Firefox no matter what the end user screen resolution is. In IE however, it sucks. Rather than getting a nice grid of thumbnails with several columns and several thumbnails per row and a clean overflow to the next row, IE renders only one column. This is just one of the many rendering problems I'm having in this particular app. Even with simple grids, I'm finding IE doesn't like "flex" much either.

Ext.define('Books.view.ThumbsList',{
    extend : 'Ext.view.View',
    alias : 'widget.thumbslist',
    initComponent : function(){
        Ext.apply(this,{
            store : 'Bookpagepfs',
            autoScroll : true,
            singleSelect: true,
            itemSelector : 'div.thumbnail',
            overItemCls : 'thumbnail-over',
            tpl : this.buildTemplate()
           
        });
        this.callParent(arguments);
    },
    
    
    buildTemplate : function(){
        return Ext.create('Ext.XTemplate',
            '<tpl for=".">',
                '<div class="thumbnail">',
                    '<div data-qtip="{PGDESC}">',
                        '<img src="{PGPATH}" height="300" width="200"/>',
                    '</div>',        
                '</div>',
            '</tpl>'
        );
    }
});

//CSS
.thumbnail{
    display:inline-block;
    background-color:#FFFFFF;
    margin:5px;
    text-align:center;
    padding-top:10px;
}
.thumbnail-over{
    background-color:#000000;
}

[eweiler]

'inline-block' display isn't supported the same in all browsers.

here are some links to 'hacks' or other explanations of how it works


https://www.google.com/search?q=disp...hrome&ie=UTF-8