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.

HTML

I'm loving the trolls

Why my navigation is good on chrome but off on safari?

4 Answers

Paul Barron
Paul Barron
6,595 Points

Check on how you're aligning it. It could be a lack of prefix like -webkit- in your CSS, or I'm not sure which one safari uses. If it's something like Flexbox then I'm like 99% sure that's the issue.

yea i'm not using flexbox i usually dont like it because there's always issues with it. I still dont know the problem

Paul Barron
Paul Barron
6,595 Points

I'll get back to you soon, not around my pc right now. Meanwhile try inspecting it using safari.

Grant Zabriskie
Grant Zabriskie
11,017 Points

Joe,

I'm seeing the exact same layout on both Chrome and Safari. I also don't see a float left on your div.logo element. Using the Inspector on both Chrome and Safari, I added float left to div.logo, and div.menu popped up to the top of the page next to the logo.

Adding float: left to div.logo and float: right to div.menu is a fine way to get a logo and navigation next to each other. I do it all the time and it's a very cross-browser-compatible way of doing it. The only think I'd say is that you probably want to add some margin-top to div.menu so that it either vertically aligned in the center of div.logo or aligned along their bottoms.

Flex-box would be a much more flexible way to get this layout, but you're right using floats is still more supported across all the browsers.

Let me know if I'm missing something and if I can help more!

Paul Barron
Paul Barron
6,595 Points

Have you figured it out? If not go here http://css.maxdesign.com.au/listutorial/horizontal_master.htm This helped me out. Notice what's in the nav ul vs. what's in the nav ul li