search

scottjehl / Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
MIT License
11.33k stars 3.36k forks source link

Someone see where I'm breaking respond.js with my CSS? #281

Open ryHollingsworth opened 10 years ago

ryHollingsworth commented 10 years ago

Something in my CSS is causing respond.js to do two things. 1.) Crash IE8 2.) not work. If I simply do not load my css into my Bootstrap 3 site then no crashes and it works. Anyone see what I'm doing here to tick this guy off?

/*****

Basic Styles

**/

img{ max-width: 100%; } .mobile-hide{ display: none; }

body { padding-bottom: 20px; }

.navbar { margin-bottom: 0px; }

.bordered-box{ border: 2px solid #888; padding: 8px ; /* overflow: hidden; */

} .border-left{ border-left:2px solid #888; } .no-side-margin{ margin-left: 0px; margin-right:0px; } .rounded-corners{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .rounded-corners-bottom{ -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .rounded-corners-top{ -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; }

.col-sm-0{ width: 0px; float: left; overflow: hidden; margin:0px; padding: 0px; min-height: 1px; }

.padding-left{ padding-left: 6px; } .padding-top{ padding-top: 6px; }

.padding-bottom{ padding-bottom: 20px; } .margin-top{ margin-top: 8px; }

.margin-bottom{ margin-bottom: 20px; }

img.padded-img{ padding: 10px; }

.big-padding{ padding: 20px 0px; } .no-margin-bottom{ margin-bottom: 0px; } .no-margin-top{ margin-top: 0px; } h4.no-margin-bottom{ padding: 4px; width: 100%; } .no-padding{ padding: 0px; } .no-border{ border: 0px; } .added-padding{ padding: 8px; } .smaller-font{ font-size: 10px; } .row input, .bootstrap-select:not([class="span"]):not([class="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: 75%; margin-bottom: 5px; }

.full-inputs input , .full-inputs select{ width: 100%; }

.row select{ width: 75%; } .row input[type=radio], .row input[type=checkbox]{ width: inherit; } .row input[type=radio], .row input[type=checkbox]{ max-width: 12px; } .rotate-clockwise{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

} .fullwidth{ width: 100% !important; } .short-width{ width: 55px !important; } .no-hover:hover{ text-decoration: none; } .no-margin{ margin: 0px; }

.no-bg{ background: inherit; } /*****

Colors

**/

.x-light-grey{ background: #f1f1f1; color: #000; } .light-grey{ background: #ececec; color: #888; } .light-grey-text{ color: #ececec; } hr.light-grey-text{ border-color:#dfdfdf; } .medium-grey{ background: #c6c4c4; color: #000; } .medium-grey-text{ color:#c6c4c4; } .medium-grey-text a{ color:#c6c4c4; text-decoration: underline; } input.medium-grey{ background: #c6c4c4; }

.medium-dark-grey{ background: #6f6e6e;
}

.medium-dark-grey a{
    color: #fff;
}
.medium-dark-grey a:hover{
    color: #000;
    text-decoration: none;
}   
.medium-dark-grey:hover {
    background: #c6c4c4;
}

.dark-grey{ background: #173746; color: #fff; } .dark-grey-text{ color: #fff; }

.black-text{ color: #000; } .white{ background: #fff; color: #888; } .white-text{ color: #fff; }

.yellow-text{ color: #e97e00; } .light-blue{ background: #4bb0e4; color: #fff; } .light-blue-text{ color:#4bb0e4; }

.medium-blue-text{ color: #428BCA; } .blue{ background: #232a58; color: #fff; } .blue-text{ color: #232a58; } hr.blue{ border-color: #232a58; } .red-text{ color: red; }

.medium-green{ background: #176c19; } .medium-green-text{ color: #176c19; } .medium-green a:hover{ color: #000; text-decoration: none; }
.medium-green:hover { background: #c6c4c4; }

.medium-green a, .medium-green{ color: #fff; }

.grey-gradient{ background: #ededed; background: -moz-linear-gradient(top, #ededed 0%, #f2f2f2 30%, #f8f8f8 46%, #f8f8f8 49%, #f6f6f6 49%, #f6f6f6 50%, #ffffff 78%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(30%,#f2f2f2), color-stop(46%,#f8f8f8), color-stop(49%,#f8f8f8), color-stop(49%,#f6f6f6), color-stop(50%,#f6f6f6), color-stop(78%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%); background: -o-linear-gradient(top, #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%); background: -ms-linear-gradient(top, #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%); background: linear-gradient(to bottom, #ededed 0%,#f2f2f2 30%,#f8f8f8 46%,#f8f8f8 49%,#f6f6f6 49%,#f6f6f6 50%,#ffffff 78%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); }

/*****

Header

**/

.padded{ padding-top: 15px; }

/*****

Arrows

**/ .arrow_box { position: relative; padding:5px 15px; height: 30px; }

.arrow_box_blue{ background: #112346; color: #fff; z-index: 100; } .arrow_box_blue:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(17, 35, 70, 0); border-left-color: #112346; border-width: 13px; margin-top: -12px; } .arrow_box_blue:before { left: 0%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255,255,255,0); border-left-color: #ececec; border-width: 13px; margin-top: -12px; } .arrow_box_grey{ background: #ececec; color: #888; font-size: 10px; line-height: 20px;

} .arrow_box_grey:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(17, 35, 70, 0); border-left-color: #ececec; border-width: 13px; margin-top: -12px; } .arrow_box_grey:before { left: 0%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255,255,255,0); border-left-color: #ececec; border-width: 13px; margin-top: -12px; }

.arrow_box:first-child:before{ border: none; }

/*****

Sidebar

**/

sidebar h2{

font-size: 18px;
padding: 4px;
margin-bottom:0px;
margin-top:32px;

}

sidebar ul{

margin-left:0px;
padding:0px;

}

sidebar li{

list-style-type: none;
padding: 20px 10px;
font-size:12px;

}

sidebar a{

color: #000;

}

sidebar .active a{

color: #fff;

}

sidebar .active:after{

}

sidebar{

overflow: hidden;

} .sidebar-nav a:hover{ text-decoration: none; } .sidebar-nav a:hover li{ background: #4bb0e4; color: #fff; } .sidebar-nav a:hover li.light-blue{ background: #c6c4c4; color: #fff; }

.toggle-btn{ margin-top: 5px; }

.toggle-btn .glyphicon{ padding-right:6px; padding-left:6px; } .toggle-btn a:hover{ text-decoration: none; }

a#toggler-hide{ color: #fff; } a#toggler-show,a#summary-show,a#summary-hide, .btn-padding{ padding: 4px; }

a#summary-show .glyphicon{ padding-right:3px; }

.filter-section{ margin-bottom: 20px; border-bottom: 4px solid #888; }

filters input{

width: inherit;

}

/*****

Home Page Dashboard

**/

.bordered-box h4.dark-grey{

}

/*****

Summary Floater

**/

.row{ position: relative; }

summary-info{

position: absolute;
right: 0;
z-index: 101;
background: rgba(255,255,255,0.89);

}

.summary-box{ padding: 0px; margin: 10px 0px; } .summary-box h5{ margin-top: 0px; padding:5px 0px 2px 4px; }

.summary-box h6{ font-size: 14px; padding: 4px 6px 10px; }

.summary-box p{ font-size: 12px; padding: 1px 8px; margin: 0px; }

.summary-box hr{ margin: 2px 10px; border-color: #888; } p.text-indent{ padding:1px 14px; }

asset-btn{

max-width: 200px;
padding: 5px 0px 5px 5px;

}

.summary-box .light-grey{ padding-bottom: 15px; }

.summary-box .row{ padding: 0px 6px; font-size: 12px; }

/*****

Company/Account Information

**/

company-header h3, .section-title{

margin-top: 0px;

}

company-header input{

width: 90%;

}

/* Tabs */

.request-buyout{ margin: 5px 0px; }

tab-area{

max-height: 350px;
overflow: scroll;
margin-top:30px;
margin-bottom: 30px;
border-bottom:3px solid #888;

}

tab-area .nav-tabs>li{

background: #ccc;
border-radius: 4px 4px 0 0;

}

tab-area .nav-tabs>li a{

color: #000;

}

.table th{ } .table th a{ color: #fff; } /* FAQS */

faqs h5{

font-weight: 600;
padding: 6px;
margin-top:0px;

}

faqs .panel-title{

font-size: 14px;

}

faqs .panel-default>.panel-heading+.panel-collapse .panel-body{

font-size: 12px;

}

.faqs-list{ list-style-type: none; padding-left:0px; text-indent: 20px; } .faqs-list li{ padding: 6px 0px; } .faqs-list li:hover{ background-color: #173746; color: #fff; }

/* Change Address Pages */ .table-responsive{ max-height: 300px; overflow: scroll; }

/Contract && Asset Profile /

.download-img{ max-width: 55px; }

.back-button .glyphicon{ top:2px; } .back-button h3{ margin: 0px; padding: 10px 0px; font-size: 20px; }

/* Tool Tips */

.tool-tip{ /* font-size: 20px; */ }

/*****

Payments

**/

/*****

FAQs

**/ .canon-faqs .panel-default{ border: none; } .canon-faqs .panel-default>.panel-heading{ background-color: #fff; }

.canon-faqs .panel{ -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05); border-radius: 0px; border-bottom:1px solid #000; }

.canon-faqs .glyphicon{ color: #232A58; padding: 4px; margin-right:8px; background: #e0e0e8; } h3.canon-faqs{ padding-bottom: 4px; border-bottom: 1px solid #000; }

/*****

Footer

**/

footer{ padding-bottom: 70px; font-size:12px; }

footer, footer a, footer a:visited{ color: #fff; }

footer a:hover, footer a:active{ color: #ccc; }

footer h4{ border-bottom: 1px solid rgba(204,204,204,0.52); } footer ul{ margin-left:0px; padding-left:0px; } footer li{ list-style-type: none; }

.corporate-menu{ margin-top:26px; }

/*****

Navigation

**/

/* Logo area */ .navbar-default{ background: #fff; } .navbar-default .navbar-brand{ padding-top: 20px; } a#logo-banner span { background-image: url(../assets/branding/head.jpg); background-position: left center; background-repeat: no-repeat; padding: 10px 122px 0px;

} .navbar-default .navbar-nav>li>a , footer a, div, .toggle-btn a, .nav-tabs>li{ -webkit-transition: all 500ms ease-in-out 0s; -moz-transition: all 500ms ease-in-out 0s; -o-transition: all 500ms ease-in-out 0s; transition: all 500ms ease-in-out 0s; } span, .fast-animation{ -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }

.no-animation{ -webkit-transition: all 0ms ease-in-out; -moz-transition: all 0ms ease-in-out; -o-transition: all 0ms ease-in-out; transition: all 0ms ease-in-out; }

.alpha-out{ opacity: 0; }

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{ color: #d10801; }

.navbar-default .navbar-nav>li>a{ border-bottom: 4px solid #fff; } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus{ border-color:#d10801 }

.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{ background: #d10801; }

/* Desktop Menu */ .navbar{ border-color: #173746; border-width: 0px 0px 3px;

}

logo-banner{

max-width: 100px;

}

.navbar-nav>li>a:after { content: ''; position: absolute; left: 100%; bottom: 20%; height: 50%; border-right: 1px solid #ececec; } .navbar-nav li:last-child a:after{ display: none; }

/* Active Link */ .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{ background-color: inherit; border-bottom: 4px solid #d10801; color: #d10801; }

/* Mobile Menu */ .navbar-collapse .pull-right{ width: 100%; margin: 0; }

/*****

Media Queries

**/

@media (min-width: 768px){ .navbar{ border: none; max-width: inherit; } .navbar-nav>li>a{ padding: 8px; padding-top:35px; padding-bottom:35px;

}
.mobile-hide{
    display: block;
}

.navbar-collapse .pull-right{
    width: inherit;
}

a#logo-banner span {
    background-image: url(../assets/branding/CanonFinancialServices_HEX_CC0000_LG.gif);
    background-size: 100px;
    padding: 15px 55px 0px;
}   
.navbar>.container .navbar-brand{
    margin-top:25px;
}
.corporate-menu{
    border-top:1px solid rgba(204,204,204,0.52);
}
#logo-banner{
    max-width: inherit;
}

}

@media (min-width: 992px){ .navbar-default .navbar-nav>li>a{ font-size:16px; } a#logo-banner span { background-size: 140px; }

footer h4{
    font-size: 15px;
}

}

@media (min-width: 1200px){ .corporate-menu{ border-top:none; border-left:1px solid rgba(204,204,204,0.52); } }

ryHollingsworth commented 10 years ago

.table-responsive{ max-height: 300px; overflow: scroll; }

overflow:scroll is breaking the site. Don't know why exactly.. found it and coincidence has it that I no longer need this attribute but this could be an issue to look into and correct.