I'm creating an internal site for my company, using bootstrap and custom CSS, and everything works fine on Chrome and IE. Firefox is not loading the CSS at all for some reason.
Been beating my head against the wall for almost two days on this one. I have checked around lots of different firefox CSS issues here on the forums, but so far I have still been unable to fix the issue.
The weird part is everything works fine on my WAMP server and in localhost. I even built the site originally in Firefox. I'm suspecting a server issue, but I'm not sure. I just got this server space provisioned, so I may be missing a step somewhere.
Firefox is simply not loading the CSS from what I can tell, here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>ADS</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="justified-nav.css" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
And the CSS (Using the Justified-Nav example from the Bootstrap page as base):
@charset "utf-8";
body {
padding-top: 20px;
}
.link {
font-size: 1.6em;
display: block;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
.header {
margin-bottom: 1%;
}
.banner {
width: 350px;
height: auto;
}
.end {
margin-top: 2%;
font-size: 0.9em;
color:#777;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Set main buttons for correct size and center in cols */
.btn-main {
text-align: center;
font-size: 3em;
}
.btn-center {
text-align: center;
}
.separater {
padding-top: 2%;
padding-bottom: 2%;
}
.doc {
padding-top: 2%;
text-align: center;
}
.doc .btn-main {
margin-bottom: 2%
}
.page-image {
display: block;
margin: auto;
}
#calendar {
width:100%;
height: 1200px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #777;
text-align: center;
background-color: #e5e5e5; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #f5f5f5), to(#e5e5e5));
background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); IE6-9
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
}
Firebug simply tells me "Reload the page to get the source" for the CSS, and it is never loaded on reload. Cache has been cleared multiple times. And no style is applied, anywhere. Any ideas?