I have this HTML + CSS + js.
If you look view it in Chrome or IE, the page renders perfectly. However, FF doesn't seem to be loading the CSS file. I'm 99% certain that it's pointing to the right directory.
css/stylesheets/miracle.css
It's published using Github pages, and the css is compiled from a scss file using SASS. If anyone could point me in the right direction, it would be much appreciated.
Firefox doesn't like the #charset "IBM437"; declaration at the top of your miracle.css file. Try removing this line.
It looks like this may be added to your output by SASS, so you should check the encoding of your source (scss) files to determine where SASS is getting this from.
Related
I am working on a small web project which was working perfectly fine for some time but suddenly some CSS styles are not being applied anymore.
I have applied styles through a class in HTML.
When I write the same styles inline they are working fine but when applied through a class in HTML, they aren't working.
My question is, why are they working inline but not when I put them in a class and attach a CSS file?
If they are working inline but not when the file is linked I would guess that the link to the css file might have a typo. I had a similar problem earlier and turns out I was linking index.css instead of styles/index.css since I had put the css into its own folder.
First of all check the path of your css file wherever you linked it.
If its not a typo then simply press Ctrl+F5 in chrome (Windows).
Many times when your css file is large so your browser stores it in cache and hence not every time it renders your css file when updated in editor and reloaded the site.
To rectify this simply press Ctrl+F5.
This will clear the browser cache for that tab(that website) and reload the page forcing the browser to render the updated css.
EDIT: For Mac if you are using safari, the shortcut is Command+Alt+E
In Mac if you are using Chrome, Ctrl+F5 will not work, so refer to this site: https://clear-my-cache.com/en/apple-mac-os/google-chrome.html
I have a form in the website http://helloiwant.com/demo.html
It is done with bootstrap. However when I view it on either safari or firefox, it doesn't show it properly but it always shows it properly on chrome. My guess is something to do with css but I cannot figure out the solution. Thanks in advance!
I looked at the source code of the webpage, if everything being white is the problem you have to change color and border-color in the css to black(#000) (or the color you want) since everything is white/(#fff).
But it seems like you are using an external source for the bootstrap css, so you should go to the official site and download bootstrap and put it on your server. Remember to customize it to fit the style you are going for, or edit it manually after downloading it.
Or you can create an extra css file that loads after the boostrap css, and just add overrides for the colors.
I have no idea why it works for you in Chrome, in my experience Chrome always finds a way to load outdated css files, try to disable cache in the developer tools.
How to disable cache in chrome? <-Check answer here
When page of my application is loaded font in some html tags is default one and when you mouse over it, proper font immediately shows. I made a list of things that probably matters:
Position of element doesn't matter, it occurs on absolute and static.
Font of my choice if assigned to body tag so there is no way some stylesheets don't get loaded.
I load fonts via #import from fast.fonts.net. This line of code is almost on the top of my stylesheets, above is only reset.
I load my assets from s3, minified in one file.
It never occurs locally and the only browser that this bug was seen is Chrome.
It is rare bug, maybe 1% of all page refresh, so reproducing when you want to see it is difficult
Once I have seen this issue in bugsnag.com
App is heavy on front-end side
Do you have any ideas how I could fix it?
I discovered that injecting fonts via JS script tag and not css #import works best. After that client stopped reporting me this issue.
It's simple change and the reason why it works must be connected with some Chrome bug.
Why won't Firefox see the link between the HTML and the CSS when I try to view in Aptana? I've emptied the cache in Firefox, checked that the files are in the same folder, double and triple checked the code structure and placement in the header on the html page and tried Safari as the preview browser. I'm working from the local drive. Firefox and Safari see and read the html page fine, but none of the CSS style attributes are "cascading".
Sounds frustrating but there's always a solution (I guess),
First of all, is the link to the css file correct?
Second, is the link inside the header? Placing the file in the body could influence the result.
Thrid, load the page in firefox, right click on the page and select view page source. Locate the link to your css file and check the absolute path from there (click it and see if your css file is actually there).
Maybe the syntax is wrong, try using href="./style.css" in the stylesheet link.
Hope this helps
In my website I have a stylesheet that is being rendering in the html with the following line:
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:61000/test/portal_css/Keith%20Theme/keithCustom.css"
All of these styles are being used on the site, but if I go to the resource tab of the developer tools it has my keithCustom.css stylesheet under the resources/images. This is annoying because it prevents me from being able to look at the stylesheet from the developer tools.
I was wondering if anyone's ever ran into this, or if this might be a bug with chrome.
I can always use Firefox to look at it, but I use chrome as my main browser and I would really like this too work.
Any suggestions or comments would be greatly appreciated.
EDIT: Turns out someone has already asked this question and I didn't find it in my original search Google Chrome Developer tools - CSS file showing as an image resource, the solution here worked like a charm
Apparently Chrome isn't interpreting your CSS file as an actual CSS file. Could it be its URL's fault? Does it happen when you browse the same page with its stylesheet on another server? Or try to use a relative path instead of an absolute path on the href attribute.
You could also check the CSS file's encoding. AFAIK the UTF-8 BOM signature can ruin lots of PHP scripts. It might be confusing Chrome, causing it to think the file isn't a plain text stylesheet…
Hope it helps at least clearing some possible suspects!