Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

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

    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;}
    Last edited by dylanbaumannn; 07-05-2012 at 10:43 PM. Reason: thinning code

  2. #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    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


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •