Firefox NOT including CSS files - Chrome & IE6 are. (confused)

dylanbaumannn · 07-05-2012, 09:38 PM

Hello!

I've been doing web dev for a few years now, but this one really has me confused. Firefox is not including the FULL css inside of an external stylesheet. both Chrome and IE6+ are calling it in...

It is calling it inside of the head and calls the first 20-or-so lines of the CSS then it stops. I had assumed that there was a missed ending bracket or semi-colon that was preventing the page from loading any further CSS within FF, however the CSS validates perfectly and there is no missing brackets...

Am I just missing something obvious?

Here is the start of the HTML where the page is being called in

Code:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="author" content="Corporate 3 Design" />
<link href="/css/main.css" media="screen" rel="stylesheet" />
</head>

and here is the first few lines of the CSS, it stops calling the page after you reach the end of the reset

Code:

/* BASED ON html5doctor.com Reset Stylesheet v1.6.1
   by Richard Clark - http://richclarkdesign.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark,
audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* IT STOPS CALLING THE CSS RIGHT HERE. ANYTHING FROM HERE ON WILL NOT BE CALLED IN */


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul, ul.nav, ul.nav ul {list-style:none; padding:0; margin:0;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
font {
color: inherit !important;margin: inherit !important;
padding: inherit !important;
font: inherit !important;text-decoration: inherit !important;
border: inherit !important;bottom: inherit !important;
top: inherit !important;left: inherit !important;
right: inherit !important;position: inherit !important;clear: inherit !important;
float: inherit !important;height: inherit !important;width: inherit !important;
letter-spacing: inherit !important;text-transform: inherit !important;
outline: inherit !important;overflow: inherit !important;
display: inherit !important;visibility: inherit !important;
text-indent: inherit !important;white-space: inherit !important;
word-spacing: inherit !important;
z-index: inherit !important;text-align: inherit !important;
max-height: inherit !important;max-width: inherit !important;
min-height: inherit !important;min-width: inherit !important;
cursor: inherit !important;
}



html {
	width:100%;
	height:100%;
	overflow-y:scroll;
}
body {
	line-height:1;
	width:100%;
	height:100%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 81%;
	background:#fffbf4 url(/images/main/bg_body.jpg) no-repeat top center;
	position:relative;
}

@font-face {
font-family:"Franchise";
src: url('../fonts/Franchise-Bold.eot');
src: url('../fonts/Franchise-Bold.eot?#iefix') format('eot'),
     url('../fonts/Franchise-Bold.ttf') format('truetype'),
}


div {position:relative;}

dylanbaumannn · 07-05-2012, 10:04 PM

FIXED

I have figured this out by reverting my subversion back till I found the change that broke the styling.

the error occurred when I changed

Code:

@font-face {
font-family: 'Franchise';
src: url('../fonts/Franchise-Bold.ttf') format('truetype');
}

to

Code:

@font-face {
font-family:"Franchise";
src: url('../fonts/Franchise-Bold.eot');
src: url('../fonts/Franchise-Bold.eot?#iefix') format('eot'),
     url('../fonts/Franchise-Bold.ttf') format('truetype'),
}

Not sure if it was the inclusion of quotes instead of single-quotes or if was the double "src" tag needed for IE bugs that broke FF, but either way, just don't do that if you want to avoid the issue