I have a problem with CSS file, if I browse my application via another machine or through published folder , the CSS file is not getting applied but the same CSS file works fine in machine where the application is set up. The CSS file is not compatible with IE6,IE7, IE9 and firefox. Please let me know how to make it compatiable in all versions.
use relative paths for the css files
Related
sass file can be viewed in web developer tool (style editor) of browser. But if tried to open in new tab of browser get 404 error.
e.g.
website :- https://getbootstrap.com/
scss url :- https://getbootstrap.com/docs/5.0/scss/bootstrap.scss
Can anyone tell me why browser's developer tool can show the contents of scss file but we can't open or download that scss file using url.
You can't see the .scss file because the browser doesn't understand how to display it. .scss is a different thing than .css (which a browser does understand). In order for the browser to know what SCSS is, you need some kind of compiler to output CSS. If you want to get into scss development you should check out a compiler like webpack
https://webpack.js.org/loaders/sass-loader/
or if you just want to check out how its done have a look at codepen & test out some features:)
https://blog.codepen.io/documentation/using-css-preprocessors/
So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
So I compiled my SASS into one CSS file using codekit 2 on their own localhost and the website looks perfectly fine.
However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the SASS from my server leaving the compiles CSS it looses my fonts as well.
Does anyone know why is this?
Here is the website: http://bubbacue.nathanpatton.co.uk/
And the GitHub Repo for all the files: https://github.com/NathanPatton/Bubbacue
Your web host is generating a bunch of 403 Forbidden and 404 Not Found errors on the assets.
In Chrome, go to View, Developer, JavaScript Console and you'll see a list of the problem files and directories. Here is how to fix it.
I'm using Twitter Bootstrap 3.0 on a project. There's a fixed requirement of not hosting any files externally. But when I host the .css and .js files locally, the Glyphicons become corrupted.
Here's what it should look like:
Using bootstrap.min.css from the original CDN issues no errors, but placing the same file on the local server will affect the icons rendering, like in the image below:
It doesn't seem to matter if I download and save the original file using wget, DownThemAll, or open it on Firefox and use the "Save As" feature. It doesn't matter if the <link> href is href="/css/bootstrap.min.css, href="http://www.domain.com/css/bootstrap.min.css or href="http://www.domain.com/bootstrap.min.css.
My dev machine is running Linux. I can only use it to browse the site, both on my dev machine and in production. I'm using Firefox 26, but changing the value of security.fileuri.strict_origin_policy has no effect. As far as I can tell, the only difference that causes the render error is the CSS file location.
The issue happens both on my dev machine and in the live server.
Glyphicons are webfonts loaded from addresses hardcoded in the CDN version of Twitter Bootstrap. The original code is:
#font-face{font-family:'Glyphicons Halflings';src:url('../fonts/glyphicons-halflings-regular.eot');src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff') format('woff'),url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
You have to either edit the CSS or place the font files on the /fonts/ folder. You can obtain both the fonts and the CSS files at the "customize" page.
I'm having trouble making my CSS external stylesheet work in my actual hosting. It all works fine when I open the files from my Finder (I'm using a mac), but the stylesheet does not seem to load to my server properly. All other html files load fine and are visible when you visit my website in any browser,this is my website and the File Manager on my cPanel indicates that the CSS folder and external stylesheet file have been successfully uploaded for enough time that the style features should display. I tried clearing my browsing history and reopening my browser.
My link tag is and I have tried it using aswell as with just "css/socialpolarities.css". I've checked to make sure the spelling is right on the path and corresponds to the actual file.
Is the answer to just put all the style files in the public_html folder and then just change the path on all my html files? Or am I missing something?
I'm also using LiquidWeb if that means anything
The file css/socialpolarities.css seems to exist, but is void of content.
try looking at your local file to make sure it is indeed the one with the css code, then upload it to the same folder and override the original one.
You may have had an upload error.
I got it! The problem was actually that I needed to put the css file in the home directory, for some strange reason. My path from my html files definitely specified that the css files were in a css directory so I'm not sure if it's something I did wrong or whether the cPanel just sucks. Regardless, it works so I won't mess with it. Now time to copy all of my webfont files into my home directory...this is going to be messy lol.
Check your permission. They should be 755. You can search about permissions on internet. I changed the permissions and it worked fine.