How is it possible, I don't even know what to ask here. I cannot add a "." on css?
You css file is being processed as a javascript file. Are you sure the file is being included as a css file as in:
<link href="yourstyle.css" rel="stylesheet">
and not
<script src="yourstyle.css"></script>
Related
I'm trying to use a stylesheet. However, I keep getting this error:
"Uncaught SyntaxError: Unexpected token '{' (at style.css:1:4)"
My html
My css
I've tried moving the '{' to the next line (which worked) but then it says:
"Uncaught SyntaxError: Unexpected token ':' (at style.css:3:11)"
in your HTML use <link rel="stylesheet" href="../css/style.css"> instead.
CSS Styles are not scripts
In your html put all <script> tags inside the <head> tag as follows:
<head>
<link src="../css/style.css" rel="stylesheet"></link>
<script src="[ENTER JQUERY URL HERE]"></script>
<script src="[ENTER ANOTHER URL HERE]"></script>
</head>
In my site I don't have any LESS code or such set up but there seem to be some CSS LESS generating in my site when I check in FireFox inspector but I don't know the cause of it. Things are being generated are like:
grid-framework.less | normalize.less | table.less | scaffolding.less
I can't unfortunately post all the code because is huge. So here are the CSS includes
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/myStyle.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
Script includes
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lib/screenfull/screenfull.js"></script>
It's coming from a sourcemap reference at the end, which would look like this:
/*# sourceMappingURL=bootstrap.min.css.map */
The file it links to will contain encoded references to these less files.
Feel free to remove both the above line with the sourceMappingURL and the .map file it refers to, from your local folder.
If you're interested, here's a link explaining sourcemaps
sourcemaps explained
It's coming from your .map file that LESS/SCSS/SASS creates once compiled. The purpose of this file is to give the original file location of the CSS styles for easier debugging and development.
You don't need it if you aren't using a compiler, but it is nice to have in the event you are.
I trying to import 2 css files as follows:
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bootstrap.css">
And for some reson its doesnt working, What would be the problem?
The order of loading css really matters, I think the bootstrap.css file has some class or id which has the same id as you have in general.css. The last css file will cover the previous one.
Correct! The order of loading css really matters. Please check the order you are loading and could you please post your exact issue? Like which part are you not able to get in your html page? #user11001
Hello there ladies and gentlemen.
I've got quite the puzzler going on. I have just installed a fresh instance of Laravel (5.1) on a Vagrant (1.7.4) machine in Windows (10). The weird thing is that I'm linking both the external stylesheet and javascript the same way:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheets" type="text/css">
<script src="{!! URL::asset('js/all.js') !!}" type="text/javascript"></script>
The problem is that the styles are not being applied (cross-browser) to the elements. I'm not getting any errors in the console. When I look at the head of the document I can see that it's the right path:
<link href="http://laravel.dev/css/app.css" rel="stylesheets" type="text/css">
<script src="http://laravel.dev/js/all.js" type="text/javascript"></script>
I have a standard Laravel file structure with the CSS and JS folders inside the public folder. If I look at the sources tab inside Chrome developer tools, I can see that the JavaScript file is being loaded but there is no sign of the CSS file. But if I right-click on the link for the CSS file, and open link in new tab, I can see the CSS. I have tried explicitly changing the character encoding type to UTF-8 both as an attribute in the link tag as well as the first line of the css itself with the #charset 'at rule'. Here are some illustrations:
Thanks for your help.
In your css-link you have rel="stylesheets" (plural). It should be rel="stylesheet" (singular) :)
When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!