I recently developed a quick and dirty website for my band. Everything is working perfectly in chrome & safari but when i load the page in firefox it looks like the stylesheet isn't loading at all and everything is just being shown as if it has no style rules. Here is the link: http://www.neverwakemusic.com/
I would greatly appreciate any help on this as we are expecting heavy traffic on the site within the next few days due to our new album release.
There are a few errors in your CSS file
You have two invalid rules which contain input[type="text]. You are missing the closing ". It should be input[type="text"]
the #charset rule must be the first thing in the file.
font-color should be color
etc..
In general you should validate your CSS to find such issues at the http://jigsaw.w3.org/css-validator/validator
For example your style.css (validation of file)
(ignore vendor specific rules and look for genuine errors in syntax etc..)
Line 391 in your stylesheet, broken quote is causing Firefox's parser to stop:
#contactForm input[type="text]:focus {
Related
The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.
Firefox does not seem to be completing every aspect of the stylesheet for the site (nsfw text) www.theshandy.com
Firefox seems to have implemented the body styling but none of the class or id styles. Every other browser seems to be having no trouble at all.
After doing some research I have tried fixing problems other people have found. The sheet is directly linked (not called by php). The type is definitely text/css. And I believe it has the correct utf-8 character set.
I am really at a loss.
Thank you very much.
EDIT SOLVED:
It was a rogue apostrophe in one of the early ID styles. Apparently chrome and safari will ignore is and firefox won't and it then refused to load the rest of the stylesheet (creating the idea that the body styles were loading but not others.
Thank you for trying to help!
Check your paths.. you might be using /css/style.css instead of css/style.css.
This could generate this problem.
I don't have a lot of information here. My site has been working in IE8, but now no styles are applied. The developer tools show all of the CSS files being loaded, but no elements show any evidence of those styles being applied. Chrome & Firefox still apply all styles with no problem.
I know you can't help me without more information, but maybe you have an idea of where I could look for an error? All of my javascript is running fine. Is it possible that an invalid CSS file would just stop all style application, or something like that?
Thanks for any suggestions!
PS: possibly relevant - my base css file imports several others - about 8 in total.
Just on a lark, try removing all the imports then putting them back in one by one.
Run your CSS through the W3C CSS Validator.
Attach a new CSS file, test that it works, then slowly migrate across to the new file until it breaks. Try to track down where it breaks.
There is a cap on number of css files that can be included in a page on IE. Check if u are including lot(>31) of css files refer http://drupaleasy.com/quicktips/internet-explorer-css-file-limits
Look at the files that do get imported, say, based on body, and see if they appear chopped off. That will show a syntax error.
Even if one css file had an error (say an unclosed curly brace) that made the entire file invalid, it shouldn't affect other css files. I'm assuming you don't have html comments around all of your includes.... It's possible you're doing something systematically that invalidates all css. Try adding this code at the top of your document (let's just say below any doctype, just because), and see if that affects anything:
<style type="text/css">
* { background: #f00 !important; }
</style>
check if you have mentioned DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd in your file... I faced similar problem once.
Not sure if it'd works but give it a try.
Have just started using Google Chrome, and noticed in parts of our site, e.g. all the links on the page, are bright red. They should be black with a dotted underline.
Is there some gotcha in WebKit rendering that turns all links red regardless of the style?
Are all of the resources that you're linking to in the present at the locations where your page is seeking them (verify this by actually checking it). I've also had an issue when checking an app in Safari where I was attempting to pull a file that wasn't there and I had very similar output to yours (red links).
EDIT: Adding Developingchris's find to the answer, since it explains it so well:
k, found it.
If any of your stylesheets is missing
or pathed incorrectly, it throws a
404. If your 404 page has inline styles, they get respected via the
"alternate sheets" rule in webkit.
Thus, the red links on the "yellow
screen of death" are causing my
problem in overlap.
k, found it.
If any of your stylesheets is missing or pathed incorrectly, it throws a 404.
If your 404 page has inline styles, they get respected via the "alternate sheets" rule in webkit.
Thus, the red links on the "yellow screen of death" are causing my problem in overlap.
Chrome has a bug where it obeys alternate stylesheets. Do you have an alternate stylesheet that makes links red?
That explains the problem I had with my app--it was a Rails app, which also has 404 pages with red applied to some of the styles. Makes a whole lot more sense now than it did back then. Too bad you can't accept your own answer!
you can use a jscript console like firebug to find out where the color comes from
Have you set a :visited setting in your stylesheet?
Run your CSS file and your HTML file through the w3c validators. I had a similar problem when testing an application in Safari. The problem was in my code.