I have a very new site I am trying to put together and it seems that my css file isn't being recognized.
The site is http://www.problemio.com and I have in my index.php a direction to pick up the css file like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
and then a header div declaration like this where some of the initial styles are used:
<?php
include("divs/header.php");
?>
I am trying to go through the index.php file with firebug, but not sure how to tell if the css file is being recognized or something else is the problem.
Any ideas how to get the styles recognized?
You have to link to the CSS Reset before you link to your own styles.
The way you set it up now, the CSS Reset is resetting your styles.
Change this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
to this:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Loaded CSS:
grids-min.css
main.css
menusystem.css
reset-min.css
Reset is loading after the others, which nullifies the majority of your settings.
This is probably because of the order you are loading the CSS files. You are loading your "main.css" file first, then the YUI reset CSS, which basically resets whatever your main.css file has set already. Try loading the reset first.
The stylesheet appears to be loading fine. You need to put it after the reset styles though, or the reset will get rid of most of yours.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css"></link>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/grids/grids-min.css"></link>
<link rel="stylesheet" type="text/css" href="main.css"/>
<link rel="stylesheet" type="text/css" href="menusystem.css"/>
If the problem you think you are seeing is related to the sign-in links, note that they are set to color:#fff;, which happens to match the background...
Depending on your browser, Ctrl+Shift+I (Chrome), Ctrl+Alt+I (Safari), F12 (IE9), or Firebug (Firefox) can show you which resources are loaded... You should probably get comfortable with the developer modes for each.
Related
I am trying to make a website, and my css seems not to exist, no error, no style, nothing.
This is what I have got:
<link rel="stylesheet" type="type/css" href="/css/style.css"/>
This is the path:
index.html /css --> style.css
I went to the console to search after any error, there is no error, none. In fact, I went to the sources, and it is not even there.
Please, I would like to get feedback, thank you.
<link rel="stylesheet" href="./css/style.css"/>
This should do it, or you can also replace your type="type/css" to type="text/css"
type="type/css" is not the correct link type.
You should be careful of using / prefix in the paths.
Also, there's no link type called type/css. It's text/css.
Both of these will work:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
Set the type to "text/css". Also, try not to use a / at the beginning of your file paths if you can.
You can use this line instead.
<link rel="stylesheet" type="text/css" href="css/style.css"/>
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
I'm working on a portfolio and it looks great in localhost, but when I try to commit it to Github (https://gabrielbrickle.github.io/) the CSS does't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-lightbox.css" rel="stylesheet" />
<link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
<link href="css/animations.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
<link href="color/default.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
try changing this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
to this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
If you open the developer console(right click inspect element), It says youre trying to load from http in a https
Use https:// for bootstrap css Link.If you right click , Inspect and look at the Console in Chrome you'd find the errors.
Github is loaded over HTTPS. Referencing external stylesheets will require the same protocol.
You can see the errors in DevTools.
You can either save Bootstrap locally and reference it, or load it with HyperText Transfer Protocol Secure (HTTPS).
I had a similar issue. I messed around and figured out that I had referred to one of the sources incorrectly. I used the wrong case for the first letter of a folder of a source. I had used ./Assets/css (incorrect one) instead of ./assets/css (correct one). Fixing the error fixed the CSS on the Github site as well!
I have multiple css files in html file. It cause conflict for some of the styles.
I want to know execution sequence to avoid conflict or suggest me some other method.
Below are the code.
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox-theme.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fileinput.cs">
The CSS files will be parsed from top to bottom. For example, any conflicting styles in main.css would be overridden by style.css.
I would suggest using a CSS preprocessor like Sass and a task runner like Gulp to bundle your stylesheets together, reducing the number of requests the browser has to make. That would also make it easier to namespace any styles to avoid conflicts.
For example:
#namespace {
// original code goes here, which will all be prefixed with #namespace
}
FYI, there’s a typo in your code above—css/fileinput.cs is missing an s.
I'm stumped. Working on a site that isn't loading properly in FireFox. It loads great in Chrome and even IE, but for some reason the stylesheet isn't loading in FireFox.
The site: http://gregsonaccounting.com
I'm using html5 code and have used the basic resets and such from html5 Boiler Plate. Not sure if the problem is in my html or CSS.
Any insight is extremely helpful.
Many thanks.
Your problem comes from style.css which begins by #charset "IBM437"
Replace it with #charset "UTF-8"; and it will be better !
It seams this charset IBM437 is auto added by SASS:
CSS pseudo element ▼ becomes gibberish in IE
A stylesheet should be defined in the format;
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
You may also include media attribute, that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
In your page, it is;
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />//Here is the problem
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
So that line may be modified like;
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
Try changing:
<link rel="stylesheet" href="stylesheets/style.css" rel="stylesheet" />
to
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
My CSS code worked well on Chrome, but it kept crashing on IE and Firefox. Then i found out the problem was in a badly preprocessed CSS.
Just copy paste your CSS to http://csslint.net/ and if you get any error, just fix it and you are good :)
Worth trying!
insert this inside your html documents. I am not writing in code just giving u the key words so you know and can put it in.
link rel="stylesheet" type="text/css" href="stylesheet.css"
it works so make sure you have this correctly or else your html document will not load with your stylesheet. best of luck to you and keep working brah.