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 Michael Gailey
Michael Gailey
841 Points

problem with browser showing .css changes to html.

So I'm working on the cupcake tutorials; and having an issue with changes from the "normalize.css & grid.css showing up in Firefox and chromium. I have rechecked my links numurous times and they appear correct. I checked firefoxes view source/elements and both .css show up as being linked. I also copied the html and each .css into the site www.jsbin.com and thier output window shows them working together just fine; and making the correct changes. So with that why are they not showing up in my browser? I'm working in localhost.

here is my html:

<!DOCTYPE HTML>

<html> <head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin` Cupcake Company</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css"  media="screen"/>
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"/>
</head>

<body> <div class="container clearfix"> <div class="grid_4"> <src="images/logo.gif" alt="Smells like Bakin` logo"/> </div> <div class="grid_8 omega"> <ul class="nav"> <li><a href ="#">About</a></li> <li><a href ="#">Cupcakes & Prices</a></li> <li><a href ="#">Locations</a></li> <li class="last"><a href ="#">Contact Us</a></li> </ul> </div> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href ="#" class="btn">Browse Our Cupcakes</a></p> </div>

<img src="images/you-bake-me-blush.gif" alt="You Bake me Blush">

<div id ="featured-cupcake">
  <h2>Cupcake of the Week</h2>
  <p>This week's featured cupcake is the <a href="#">Lime Margarita cupcake</a>. it's a strange combo of flavors will kick your tase buds into fiesta
     mode!</p>
  <img src="images/cuplime.jpg" width=320px height=460px alt="Lime Margarita cupcake"
</div>

<div id="New Cupcakes">
  <h2>Fresh Out of the Oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
  <img src="images/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="images/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">

</div>

  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin' started out in the garage of the husband and wife duo Allison &amp; Joseph. Allison is the baker, and joseph found
     a way for them to build a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business
     and cupcake truck.</p>
  <p><a href="#" class="btn-small">Read More</a></p>

  <h2>Get Bakin' with Us</h2>

<div id="contact">
  <p>Call us: <span>1-555-Cup-Cake</span><br>
     Email us <a href="#">bakeon@smellslikebakin.com</a></p>
</div>


  <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
  <a href="http://www.facebook.com/smellslikebakin"><img src="images/logo-facebook.jpg" width=50px height=50px alt="Facebook"></a>
  <a href="http://www.twitter.com/smellslikebakin"><img src="images/Twitter.png" width=60px height=60px alt="Twitter"></a>

<div id="copyright">
  <p>&copy: 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

</div> </body> </html>

4 Answers

Katrina M
PLUS
Katrina M
Courses Plus Student 2,780 Points
Katrina M
Katrina M
Courses Plus Student 2,780 Points

I don't know. Same thing has been happening to me since yesterday. And, I checked my directories, downloaded the files again, etc...it's bakin' me crazy.

Michael Gailey
Michael Gailey
841 Points
Michael Gailey
Michael Gailey
841 Points

Same here. Wasted half a day at work so far dwelling on it. The only thing I have accomplished is stuffing my face with food.(Damn Charlie for bringing fresh baked homemade bread everyday and sitting it behind me!!)

Katrina M
PLUS
Katrina M
Courses Plus Student 2,780 Points
Katrina M
Katrina M
Courses Plus Student 2,780 Points

Well, as long as you don't turn into a cupcake, it may work itself out lol.

A_ NDI
A_ NDI
3,216 Points
A_ NDI
A_ NDI
3,216 Points

Hi,

Having problems with the centering too, auto margin in the grid does not seem to be working (tried Chrome, IE, Firefox). When I continue following the video and add the clearfix class + grid_4, the appearance of the logo does change, so I'm pretty sure the grid file is in the correct place (right??). I tried to input it into codepen, but I don't know if I did it right, this is the link http://cdpn.io/aegdC Thanks for helping out! :-)

A_ NDI
A_ NDI
3,216 Points
A_ NDI
A_ NDI
3,216 Points

I don't know if this is a real solution or not, but I just zoomed the page to 75% instead of 100% and it looks perfect now. Greetz

Michael Gailey
Michael Gailey
841 Points

Your code looks just like mine.(I like the added accent mark on jalapeno.) I went on today after taking a break and noticed all my pics were missing from the page. I tried the zoom to no effect. I seemed to get results though messing with my text editor. I use Geany; and I closed down Firefox, went to my Geany, clicked 'Build' on the toolbar and clicked 'Execute'. My page is now the way it should be.

A_ NDI
A_ NDI
3,216 Points
A_ NDI
A_ NDI
3,216 Points

I did it in Sublime, for some reason I can't select "Build results", so I can't try that option. But I'm glad we can make it look how it's supposed to at least for now :-)

Michael Gailey
Michael Gailey
841 Points

well it helped a little. I then posted their index.html next to mine and compared the two over and over again and saw no problems. I then suddenly thought to scroll the pages to the left and check the few lines that stretch off to the right of the page. I'll be damned if there wasn't one little '>" missing. I inserted it, refreshed and everything rearranged how it was supposed too on the page. Before I move on to the next stage of tuts I am going to build another page for practice. Going to advertise a faux coffee shop. Also found a site with some cool grids to try. http;//www.spyrestudios.com/css-grid-systems