1

My asp.net website uses one CSS file with two groups of selectors ".Tab" and ".TabLower". On my development machine the CSS loads with all selectors and is applied correctly, when I deploy the website to production server (IIS 7) only the first selector ".Tab" is loaded if I inspect the page.

What is the cause of this issue?

Side-by-side image

CSS file

/* ############################################
Tab - default tab
############################################### */
/*Body*/
.Tab .ajax__tab_body
{
    border: 5px solid #B6C9D4;
    padding: 15px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #000000;
    padding: 7px;
    background-color: #B6C9D4;
    font-weight: bold;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
    background-color: #B6C9D4;
    padding: 7px;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #B6C9D4;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
    color: #666666;
    background-color: #F2F2F2;
    padding: 7px;
    font-weight: bold;
}
.Tab .ajax__tab_inner
{
    color: #666666;
    background-color: #F2F2F2;
    padding: 7px;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* ############################################
TabLower
############################################### */

/*Body*/
.TabLower .ajax__tab_body
{
    border: 5px solid #B6C9D4;
    padding: 15px;
}
/*Tab Active*/
.TabLower .ajax__tab_active .ajax__tab_tab
{
    color: #000000;
    padding: 4px;
    background-color: #B6C9D4;
    font-weight: bold;
}
.TabLower .ajax__tab_active .ajax__tab_inner
{
    background-color: #B6C9D4;
    padding: 4px;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #B6C9D4;
}

/*Tab Inactive*/
.TabLower .ajax__tab_tab
{
    color: #666666;
    background-color: #F2F2F2;
    padding: 4px;
    font-weight: bold;
}
.TabLower .ajax__tab_inner
{
    color: #666666;
    background-color: #F2F2F2;
    padding: 4px;
    font-weight: bold;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}
Iztoksson
  • 980
  • 16
  • 32
  • 1
    Are you getting any error in browser error console? – Sain Pradeep Sep 12 '14 at 09:09
  • Interesting, yes I do get an error on prod server "HTML1113: Document mode restart from IE7 Standards to IE9 Standards", I googled a bit and SO recommends putting "" which I already have in cluded in my master page. – Iztoksson Sep 12 '14 at 12:45
  • Is this happening in all browser or only in IE 9? – Sain Pradeep Sep 12 '14 at 13:00
  • Sadly I am limited to IE9, some users have IE10 or IE11 but only IE (client restriction...), so yes the error is in IE (9 in my case) but this is all I can test with. – Iztoksson Sep 12 '14 at 13:03
  • please refer this http://stackoverflow.com/questions/11080560/does-ie9-have-a-file-size-limit-for-css – Sain Pradeep Sep 12 '14 at 13:05
  • I'm not sure how but it works now, what I did was put at the very first line in webpage and manually turned Compatibility mode off, now it works. But the strange thing is if I put back to second line and turn Compatibility back on it still works!? I'll try with some users on their PC's and see what gives. – Iztoksson Sep 12 '14 at 13:15

0 Answers0