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

Jacob Arsement
Jacob Arsement
3,048 Points
Posted by Jacob Arsement
Jacob Arsement
3,048 Points

Smells Like Bakin' - layout issue

I've gone through the whole Smells Like Bakin' building a simple website module. When I open the index.html file locally, everything aligns correctly and looks correct. However, after uploading my files to via SFTP, the "you bake me blush" image is aligned on the left side and the navigation menu items seem to have been pushed down a bit.

Apparently the code is correct judging from the way the page looks when I open the file locally, so the issue has to do with the file upload process.

Any ideas as to why this could be happening? All css sheets are referenced in the html doc.

Below is the first part of the body:

<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>
    <div class="grid_8 omega">
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div id="intro" class="grid_9">
        <h1>Opposites really do attract, especially in our kitchen!  We combine unexpected flavors that melt together to create ironically delicious deserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div class="grid_3 omega">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
    </div>

Any ideas?

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

It's hard to say without seeing the site.

If I had to guess, I'd say it sounds like a permissions issue.

The specifics of how to change permissions depends on your exact setup. However here are some instructions on how to change permissions using the Filezilla FTP client

Make sure grid.css has it's permissions set to 644.

Jacob Arsement
Jacob Arsement
3,048 Points
Jacob Arsement
Jacob Arsement
3,048 Points

Wow! Thanks, James. Sure enough, that was the cure. Do I need to do the same thing to all css files that I work with?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

All of your HTML & CSS files should have 644 as their permissions, if your site looks correct now then you'll most discover that all the files except grid.css already have the correct permissions.

Jacob Arsement
Jacob Arsement
3,048 Points
Jacob Arsement
Jacob Arsement
3,048 Points

Kevin,

Thanks for the tip. Looks like it's working now.

Jacob