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
Robert Young
11,742 PointsAllison Grayce Site - floating menu items
Hi there, I am finally nearing the end of the Allison Grayce site - but I have a small issue: The menu 'nav' items seem to be arranged vertically rather than horizontally when I view the site in IE. I have changed altering the CSS by hand to float the items, but I am slightly unsure of the proper CSS commands to do this. Might anyone be able to shed some light on this issue? (The site is working fine in Chrome.) Thanks, Robert Young. (My site is currently available at: http://allisongrayce.young1.org).
5 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsOnly about to have a quick scan but could you try adding the following line to nav a { -ms-box-flex: 1;} see if that helps?
Adam Sackfield
Courses Plus Student 19,663 PointsHello again scrap the box-flex. Change nav a { display: inline-block; } then you will need to center align them and add some padding to the right side to space them out as it will mess up the chrome effect when changed to inline-block
Paul Graham
1,396 PointsTry to remove display: block from those nav anchors. Block means that it will take the full width of the parent. Try inline-block instead if you need a block-like structure.
Robert Young
11,742 PointsNo, still seems to be stacking vertically, unfortunately. Might this have something to do with the webkit-box-orient:horizontal property, and the fact that IE is not quite recognising this?
Paul Graham
1,396 PointsPossibly. I'm confused why you're using all these crazy prefixes on what's actually a very simple project. You have a nav with anchors. All you really need to do is assign those anchors an inline block and size them correctly. Perhaps the project itself calls for this but then I'm confused why that's the case.
Adam Sackfield
Courses Plus Student 19,663 PointsI added text-align: center to nav and also display: block. Then on nav a { padding-right: 20px; display: inline-block; } Works fine in all browsers
Paul Graham
1,396 PointsGreat, flexbox is awesome but I personally don't use it right now due to my requirements in supporting older/dumber browsers.
Robert Young
11,742 PointsCheers! Thanks so much, it is working now :). Maybe a little more padding required, but still, good job.
Adam Sackfield
Courses Plus Student 19,663 PointsYeah i was thinking more padding. If its solved click the tick next to the answer to close it off and also up vote any useful comments. Robert Young
Paul Graham
1,396 PointsYou can also use % width and center the text instead of padding. It might be a little easier for you. It really just kinda depends on how fancy you need to get to space the text properly.
missgeekbunny
37,033 PointsI was going to say what Adam Sackfield said. It's also very possible that it's a list so check and see if it's a list and if it is you'll need to adjust the hint above.