Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Anup Sheth
Anup Sheth
18,090 Points

Browser doesn't read CSS!

Hello everyone,

I just completed the Smells Like Bakin’ web page, and it was a great experience! But I’m having some browser compatibility issues, and was wondering if I could get some help . Chrome, Firefox, and IE Explorer are all have trouble reading my CSS files. I have the least issue with Chrome. Chrome reads all the CSS files except for the texture images I linked to the style.css file; Chrome uses the default colors instead. But that’s way better that the compatibility I get with Firefox and Explorer, which doesn’t read any of the CSS files (normalize, grid, and style).

All three browsers read the CSS files when I load the Smells Like Bakin’s website, but not when I run it from my local computer. Does anybody have a sense for what’s going on here? I assume the browsers can’t read the files from my local computer, but I’m not sure why. Any help would be appreciated.

I’ve included a copy of my HTML and style.css file: http://codepen.io/asheth77/pen/eDHdi

Thanks!

Anup

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

In your html where you are trying to link to your stylesheet:

<link rel="stylesheet" href="css/normalize.css" type="test/css" media="screen">

should be type="text/css"

Try that and hopefully that will fix it.

3 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

As your CSS and images are in different folders you need to use a relative path

Code would be 

.btn {
      background: #4FB69F url('../images/texture.png') no-repeat right top;
}

This tells the page to first go up a directory (../) then to the images folder, I think that should solve your problem.

Anup Sheth
Anup Sheth
18,090 Points

You solved it! Thanks so much for your help!!!

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

In your html where you are trying to link to your stylesheet

       <link rel="stylesheet" href="css/normalize.css" type="test/css" media="screen">

should be type="text/css"

Try that and hopefully that will fix it.

EDIT: Formatting which I get wrong every time! Apologies for double post

Anup Sheth
Anup Sheth
18,090 Points
Anup Sheth
Anup Sheth
18,090 Points

Thanks for your help, James! I corrected the code and got Firefox and Explorer to link to my css files. But I'm still having a problem with all the browsers finding the two texture images linked on style.css. I've double-checked the folder location on my hard drive and made sure there aren't any typos in the file name.

Not sure why the browsers can't find these pics. Do you (or anyone else) have any suggestion for how to fix this?