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 Andrea Sorrell
Andrea Sorrell
4,736 Points

I am having trouble with Mozilla. It is not displaying my navigation correctly.

Instead of aligning my navigation in the center and displaying the proper width between words it aligned left with no space between words. I added the moz prefix to display the correct orientation. Do I need to add more prefixes to fix alignment, padding and margin issues? If so what are they?

This is the code I used. 

nav {
    display: -webkit-box;
    display: -moz-box; 
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    padding: 2% 0;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;  
    margin: 2% 0 2% 0;
    }

nav a {
    font-family: 'GoudyRegular';
    display:block;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    text-align:center;
    font-size: 1.25;
    color: #666;
    }

1 Answer

A Z
A Z
13,005 Points
A Z
A Z
13,005 Points

Hi Andrea,

This may be an alternative solution that seems to work in Chrome & Firefox.

nav  {
    padding: 2% 0;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;  
    margin: 2% 0 2% 0;

    display: -webkit-flex;
    display: flex;
    height: 100%;
}
nav a  {
    font-family: 'GoudyRegular';
    text-align: center;
    font-size: 1.25;
    color: #666;

    -webkit-align-self: center;
    align-self: center;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

Initially, I tested the CSS with a validator. The results seemed to indicate some invalid vendor prefixes or indicating that they may be deprecated (i.e. -webkit-box; -webkit-box-orient). I then checked into MDN and this may be the case because MDN kept pointing to "Flexbox."

This was a helpful tutorial by Guil, Build a Navigation with Flexbox

I hope this helps or leads to the right direction.

Regards, Michael