CODEWITHSUNDEEP
htmlcssfirefoxgoogle-chrome
Bryan Casler
Bryan Casler

Reputation: 617

Firefox only loads part of my site's CSS

I'm developing a site and I have been working in Chrome, IE and on my Android phone. I decided to test the site in firefox and the whole thing falls apart. It appears to me as if all the CSS is not loading, but for the life of me I can't figure out why it wouldn't be.

Live Site: http://matttucker.onedogdevelopment.com/

In my source code I have something like the following...

<style type="text/css" media="all">@import url(....); @import url(....); </style>
<style type="text/css" media="all">@import url(....); @import url(....); </style>
<style type="text/css" media="all">@import url(....); @import url(....); </style>

It's my belief that only the CSS files listed in the first style element are being loaded.

UPDATE: Drupal also allows me to aggregate the css and outputs something like the following...

<link type="text/css" rel="stylesheet" href="..." media="all" />
<link type="text/css" rel="stylesheet" href="..." media="all" />
<link type="text/css" rel="stylesheet" href="..." media="all" />

Even when aggregated, it only appears that if the first stylesheet is being loaded. I have no idea why that would be, especially since it's already working the other browsers.

Any suggestions, pointers would be greatly appreciated.

Upvotes: 1

Views: 1474

Answers (3)

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

Looking at the CSS errors reported in Firefox, this one jumps out at me:

Error in parsing value for 'src'.  Skipped to next declaration.

followed by

Unexpected end of file while searching for closing } of declaration block.
Unexpected end of file while searching for '}'.

The relevant CSS looks sort of like this:

src: local("Meta Serif Book"),
     url(/sites/default/themes/one_dog_development_starter/css/metaserif_book.otf) format("opentype"),
}

note the trailing ','. The fact that this ends up eating the rest of the stylesheet looks like a bug in the CSS error handling in Firefox to me; I filed https://bugzilla.mozilla.org/show_bug.cgi?id=748254 to track it. But fixing the CSS to not have that problem should probably help.

Upvotes: 1

Curtis
Curtis

Reputation: 103338

Instead of using @import, try using the href property of the style element:

<link type="text/css" media="all" href="URL HERE" />

Also, as your CSS is stored on the same domain, you don't need to specify the domain name. Try structuring like this:

<link type="text/css" media="all" href="/sites/default/modules/normalize/normalize.css?m2x9bk" />

Upvotes: 0

der_chirurg
der_chirurg

Reputation: 1525

Why don't you use this?

<link rel="stylesheet" type="text/css" href="your.css">

Upvotes: 0

Related Questions