CSS not loading appropriately in IE

**infernoz** · 16 Oct 2012 11:43 AM

Hello,

I have a css file that I am using to override some default styles in my ExtJS 4.1 application. Thanks to Scott for helping me set this up in a previous post: http://www.sencha.com/forum/showthread.php?245472

Here is my css file contents and how I am using the css in grid panels in my app

Code:

.bg-row-edited.x-grid-row .x-grid-cell { 
    border-color: #ddd !important;
    background-color: #fffec7 !important;
    }    
    
.bg-row-edited.x-grid-row-alt .x-grid-cell { 
    border-color: #ddd !important;
    background-color: #fffe97 !important;
    }    

.bg-row-edited.x-grid-row-over .x-grid-cell {
    border-color: #ddd !important;
    background-color: #efefef !important;
}

.bg-row-sentToABC.x-grid-row .x-grid-cell { 
    border-color: #ddd !important;
    background-color: #90FF8D !important;
}    
    
.bg-row-sentToABC.x-grid-row-alt .x-grid-cell { 
    border-color: #ddd !important;
    background-color: #60FF5D !important;
}    

.bg-row-sentToABC.x-grid-row-over .x-grid-cell {
    border-color: #ddd !important;
    background-color: #efefef !important;
}

Code:

viewConfig: {
            getRowClass: function(record, rowIndex, rowParams, store) {
                if(!record) {
                    return '';
                }
                var sentToABC= record.get('sentToABC')
                
                if(record.dirty == true) {
                    return 'bg-row-edited';
                }
                else if (sentToABC!= null && sentToABC== true) {
                    return 'bg-row-sentToABC';
                }
            }
        },

Here is how I am loading it in my main page

Code:

<head>
.....
<link rel="stylesheet" type="text/css" href="css/dmt-overrides.css">
.....
</head>

This works fine a well in Firefox, however in IE8 and I believe IE9, the css is not being rendered correctly. Here is what it looks like when it renders in IE (Copying this from the CSS info when hitting F12 in IE)

Code:

.x-grid-row .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: #fffec7 !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

.x-grid-row-alt .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: #fffec7 !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

.x-grid-row-over .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: #efefef !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

.x-grid-row-over .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: #efefef !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

.x-grid-row .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: #90ff8d !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

.x-grid-row-alt .x-grid-cell {
border-bottom-color: #ddd !important;
background-color: ##60ff5d !important;
border-top-color: #ddd !important;
border-right-color:  #ddd !important;
border-left-color: #ddd !important;
}

Totally different css!!! The particular classes I defined (bg-row-edited, bg-row-sentToABC) are nowhere to be found and there are additional css attribues added. What is going on? Not sure if this is an ExtJS thing but couldnt find specific issues like this when searching the internet.

Thanks for your help,

infernoz

**skirtle** · 16 Oct 2012 12:09 PM

Are you sure it isn't just a browser caching problem? Check the HTML, JS and CSS.

**infernoz** · 16 Oct 2012 12:32 PM

Nope not a caching issue, it is occuring on others persons browsers as well as well as after a restart. This isnt an ExtJS issue either though.

Pretty sure I figured out the problem, IE was by default running in Quirk Mode, which renders CSS differently for legacy browser purposes. This article sums it up nicely: http://www.quirksmode.org/css/quirksmode.html . Switching to standard mode (Pressing F12->Document Mode -> IE8 Standard) solved the problem I was seeing.

I am adding the doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> to my main page. I'll see if this solves the issue

Thanks,

infernoz

CSS not loading appropriately in IE

Thread Tools

Search Thread

Display

Unanswered: CSS not loading appropriately in IE

Unanswered: CSS not loading appropriately in IE

Tags for this Thread