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

HTML

Posted by taahrqqhar
taahrqqhar
14,147 Points

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
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.

taahrqqhar
taahrqqhar
14,147 Points

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
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
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
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