PDA

View Full Version : 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


.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;
}


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



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



.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