Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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.

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

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

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?