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 Ibrahim Rodrí­guez
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points

Navigation breaking apart

Hey guys, I hope you are well.

The navigation in my browser (Google Chrome) looks good but it breaks apart on Firefox. What should I change in my code?

Link: http://982px.com/test001/

Screenshot: http://cl.ly/image/122a3A3b221e

3 Answers

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

For the header navigation

Get rid of the width: 412px; on nav ul in style.css around line 71.

For the .footer nav

Get rid of the width: 412px; on .footer-nav in style.css around line 150.

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

the font-weight property varies in different browsers, try changing your margin-left property on your li to 9px, or set the font-weight to 600.

hope this helps!

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Even though this does solve the issue, if you increase the zoom on some browsers it will mess up the alignment again, while simply removing the fixed width size seems to solve the problem across the board.

Also, my method future proofs your website just a bit. If you are to add a new page, you would again have to mess with the li margin, whereas removing the width entirely would just tag the new page link without a problem.

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Why can't there just be one browser? that would make my life so much easier. lol.

good point! ;)

Ibrahim Rodrí­guez
PLUS
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points
Ibrahim Rodrí­guez
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points

Hey guys Ernest Grzybowski and Elliott Frazier !

Thanks so much for your help, you are awesome! It's frustrating when you have these small issues and don't know how to solve them.

Thanks again!

James Barnett
James Barnett
39,199 Points

Ibrahim Rodrí­guez - If you want want to brush up on your CSS positioning skills, check learnlayout.com it's the best tutorial I've seen online for learning layout & positioning with CSS.