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 Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points

why is this making my header drop down?

if I remember correctly the margins go top-left-bottom-right (ie counter-clockwise)

the code from my main.css is fine for keeping the header to the edge of my web page.

When I add this in responsive.css it drops the header down a bit

/********************* Page: ABOUT *********************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points

TY Tracy for your help with this issue.

The issue only happens on the Contacts page when in portrait mode on a cell phone (less than 480px) all other pages are fine. You can see the issue live here when re-sizing the browser window.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Elizabeth Graham | This and That</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Elizabeth Graham-Richter</h1> <h2>This and That</h2> </a> <nav> <ul> <li><a href="index.html">Photos</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3> General Infomation</h3> <p> I am currently accepting new work.</p> <p>Please contact me</p> <p> E-mail is peferred</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:971.266.3278">971.266.3278</a></li> <li class="mail"><a href="mailto:ekgrichter@outlook.com">ekgrichter@outlook.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=MissEbet">@MissEbet</a></li> </ul> </section> <footer> <a href="http://twitter.com/MissEbet"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://plus.google.com/u/0/+ElizabethGrahamPDX/posts/p/pub"><img src="img/google2+.png" class="social-icon"></a> <p>© 2015 Elizabeth Graham-Richter.</p> </footer> </div> </body>
</html>

6 Answers

Tracy Trathen
Tracy Trathen
10,468 Points

Hi Elizabeth

I'm looking at the code now and it's doing it only on the contact page. I'll sift through it and see if I can figure out what's going on.

Tracy Trathen
Tracy Trathen
10,468 Points

Well, the only thing I can see that really is affecting it is that the h3 in the main.css file is doing something strange and making its box be much larger than it should in terms of how the browser is rendering it. Try putting a "clear: both;" on the last line of the #wrapper id in the main.css file and let me know if that fixes it. I've been looking at this for an hour and even looked at my own code to compare (mine didn't do what yours is doing). Even though the css is essentially the same (my only real differences were color choices) yours is doing that and mine isn't... it's so very odd.

Also you have one error in your main CSS file at the very top under general. It's in the body selector. 

/* Right now you have it looking like this: */

body {
  font-family: "Open Sans', sans-serif;
}

/* But it should really look like this: */

body {
  font-family: 'Open Sans', sans-serif;
}

/* OR */

body {
  font-family: "Open Sans", sans-serif;
}

For quotes in html, css, JavaScript, and many other languages, you need to make sure the opening and closing quote types are the same. You can use single or double quotes but they've got to be the same. This will be important later when and/or if you get to learning JavaScript, as sometimes you have to nest quotes, and like html tags, it's a nesting / wrapping situation.

One other thing I did notice, and I know that this may or may not be a problem these days, but your image files should not have any spaces in them, and right now they do. They appear to be rendering just fine, but I've been doing this a long time, and that's one of the first things I was taught is that you should never use images and/or file names on the web that have spaces in them.... You can use underscores or dashes or camel case instead if you need the visual clarity.

Example:

myCoolPhoto.jpg (this is camel case)

my_cool_photo.jpg (this is with underscores)

my-cool-photo.jpg (this is dashes).

Tracy Trathen
Tracy Trathen
10,468 Points
Tracy Trathen
Tracy Trathen
10,468 Points

The margins (and padding) shorthand actually goes clockwise (top, right, bottom, left). Fix the order, and you'll fix the problem. :)

Tracy Trathen
Tracy Trathen
10,468 Points

Have to love CSS Tricks website: https://css-tricks.com/remember-the-order-of-marginpadding-shorthand-with-trouble/

Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points
Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points

TY for the help. I tried that and it is still dropping down and spreading to other pages now /sigh.

back to looking at all the code to see what I missed from the index page, as that is the only page that is working like it should across all sizes

Tracy Trathen
Tracy Trathen
10,468 Points
Tracy Trathen
Tracy Trathen
10,468 Points

If you want to put your code here I can look at it if you like?

Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points
Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points

Thank for your offer. As I'm on a tight schedule I will do it later this evening. I noticed some differences in the fonts link and copied that from the Index page to the About and Contact pages. About page is working perfectly now, and contacts is only dropping the header down in mobile sizes. Could this be a browser issue?

Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points
Elizabeth Graham-Richter
Elizabeth Graham-Richter
1,569 Points

TYSVM - adding the clear: both; as suggested did the trick! It is working like it should now. I will also remember to rename my image files.

once again Thank You for all your help - it is invaluable to me while I learn to code.

Tracy Trathen
Tracy Trathen
10,468 Points

Glad I could help! :)