1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Unanswered: CSS not loading appropriately in IE

    Unanswered: CSS not loading appropriately in IE


    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

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,575
    Answers
    540
    Vote Rating
    311
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi