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 09:43 PM. Reason: thinning code

  • #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
    •