I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
Related
for some odd reason Firefox doesn't render FontAwesome properly. It works in Chrome and in Safari, just not in Firefox.
Font Awesome was added via Bower and therefore loaded locally. Nothing via CDN.
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" type="text/css">
This is how it looks in Firefox (wrong):
This is how it looks in Chrome & Safari (correct):
Things I have tried:
Tried to load it via CDN and added "Access-Control-Allow-Origin" to
.htaccess
Moved fonts into same directory (to check if it was a relative path
problem)
Nothing worked up until now.
/// EDIT
This is how its shown in the Inspector
I have fixed the problem. I was under the impression that it wouldn't matter at which position I would load the Font Awesome css file. It was one of the first css files loaded in the header. I moved it to the last position and now it works just fine.
I couldn't find out why exactly this fixes the problem in firefox, but it did the trick. What I still find extremely strange is, that it matters the order in which the css is loaded in firefox, but not in chrome and safari.
Maybe someone else knows more about this.
I included several CSS files in my website, other works good but one my CSS file (on localhost) :
<link href='http://127.0.0.1/ndf/nekib-css.css' rel='stylesheet' type='text/css'/>
loads as an image. Here's a screenshot of what I see in the Chrome Developer Tools.
Double checked the MIME-type, added it on different position but none work.
I am using WAMP.
Any idea what's wrong ?
You may be having an issue similar to the post below. Their issue came from having some non-standard css, in their case background:url()
Google Chrome Developer tools - CSS file showing as an image resource
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.
I'm using Paul Irish's HTML5 Boiler Plate.
The homepage renders fine on Chrome, Firefox, and IE8 (apart from the shadows / rounded corners - which is not of concern right now)
The margins, nav list are messed up in IE8.
It is linking to the CSS correctly, because the styles for the elements in the header come from the same file, but the positioning, and the nav list don't get their styles?
This is weird, because if there were issues in the CSS, wouldn't it render incorrectly in the root directory as well?
The script tag you're using to load Modernizr is using a relative URL, so it will only work at your domain's root:
<script src="js/libs/modernizr-1.7.min.js"></script>
Replacing it with a root-relative URL should fix this.
<script src="/js/libs/modernizr-1.7.min.js"></script>
Another tag has the same problem, but it's commented out, so it's not the cause of your rendering issues:
<!-- Uncomment if you are specifically targeting less enabled mobile browsersdo w
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
I am giving external css path in aspx page via
<link rel="stylesheet" media="all" href="file:///D:/CSS/Style.css" type="text/css" />
its works fine in firefox and ie while access that page.
but when i open this page in chrome or safari.
it does'nt do anything and no css is applying.
please tell what wrong i am doing??.
Make a relative path in the href attribute. For example: "~/CSS/Style.css"
Try an alternitive way of linking to the css:
<style type="text/css"><!-- #import url(file:///D:/css/styles.css); --></style>
But also try running a local server rather than using the file system. XXAMP and EasyPHP are good.
Done a bit of reading around, try using "file://" instead of "file:///" in your UNC. Chrome and safari should be able to read this and change it accordingly.