Question

I have a bizarre problem, IE 7 and 8 are not loading about 80% of one of my stylesheets, they get to a point, and then don’t load any further. The IE dev tools recognise the unloaded properties, but they aren’t applied in browser. The following stylesheets all load correctly, and no other browser has any problem with them. Additionally, the HTML prototype site which is about 90% the same as the near-production version has no problem.

The site is being built locally on WordPress, but I’ve uploaded the source for the home page here, should that help (the stylesheet that doesn’t load correctly is ‘760.css’). Additionally, the (correctly working) prototype can be viewed here, but some changes have been made between that version and the conversion to WordPress.

The offending stylesheet (seems to stop loading after the ul#menu-site-nav properties have been applied):

/*
Created by Mikey Clarke | @mikey_clarke
*/


#nav-bar {
    font-size: 0.95em;
    padding: 0px 0px;
    }

#nav-bar ul {
    text-align: left;
    }

    ul#menu-site-nav {
        width: 95%;
        margin: 0 auto;
        }

    #nav-bar li.primary-nav {
        width: 14.584%;
        padding: 20px 1.042%;
        float: left;
        text-transform: uppercase;
        }

        #nav-bar li.primary-nav:first-child {
            display: block;
            padding-left: 1.042%;
            }

        #nav-bar li.primary-nav:nth-child(2) {
            padding-left: 1.042%; /* restore outer padding */
            }

        #nav-bar li.primary-nav:last-child {
            padding-right: 1.042%; /* restore outer padding */
            }

            #nav-bar li ul {
                display: block;
                width: 100%;
                text-transform: capitalize;
                }

                #nav-bar li ul li {
                    float: none;
                    padding: 0px 0px;
                    display: list-item;
                    }

    #nav-bar li.shield-logo {
        background: url(/wp-content/themes/itsa/images/shield.png) no-repeat;
        background-size: 25px;
        background-position: 10px 23px;
        }

        #nav-bar .shield-logo span {
            text-indent: 1000%;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            padding-bottom: 12px;
            }

#masthead {
    font-size: 2.25em;
    padding: 35px 0;
    }

    #masthead a {
        display: block;
        padding: 0 160px;
        }

#content {
    width: 82.279%;
    padding-right: 1.042%;
    float: left; 
    }

.sidebar {
    width: 14.586%;
    float: left;
    text-align: right;
    padding: 0px 1.042% 20px 1.042%;
    background: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
    box-shadow: none;
    border: none;
    }

#section-nav>ul>li>span {
    padding: 4px 4%;
    border: 1px solid transparent;
    margin-bottom: 4px;
    }

    #section-nav li ul li {
        padding: 4px 4%;
        margin: 4px 0px;
        border: 1px solid transparent;
        }

    #section-nav>ul>li.current-menu-item>span,
    #section-nav>ul>li>ul>li.current-menu-item {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid #f6f6f6;
        -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
        -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
        box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
        background-color: #ececec;
        background: rgba(0,0,0,0.02);
        }

#breadcrumbs {
    font-size: 0.9em;
    }

/* Restore content only useful for users browsing from desktops */
.mobile-superfluous {
    display: block;
    }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5) {
    #nav-bar li.shield-logo {
        background: url(/wp-content/themes/itsa/images/[e-mail]) no-repeat;
        background-size: 25px;
        }
    }

Answer 1

After rewriting the entire stylesheet by hand and testing after every line, it seems that the problem is with the media query at the end. I’ve removed every part of the media query individually and am completely unable to identify what part of it IE is choking on. I also copied and pasted the media query to a different stylesheet and that stylesheet loads fine in IE 7 & 8. So very strange.

Since it does work without the media query, I’ve moved it to another stylesheet where it works fine.