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.

CSS

Jennifer Hinkle
Jennifer Hinkle
8,365 Points

Firefox not displaying flexbox properties

Hello,

I recently developed a website with help from How to Build a Wordpress Theme and the CSS Deep Dive. I've uploaded it to my server and am now testing the site in different browsers to make sure it all works.

I'm using Flexbox for my navigation bar only. It seems to be working fine in all browsers (Safari, Chrome, Opera, my iPhone) except for Firefox (and I'm assuming IE since I haven't had the chance to hop onto a PC yet).

While in Firefox I "inspected" my nav "element" and when scrolling through the styles, my

.nav {
display: -moz-box;
}

and

.nav a {
-moz-box-flex: 1;
}

were not showing up. When I added them in right there in the style editor, it fixed the problem. But obviously it was a temporary fix. I've gone back into my style.css file and triple checked for typos etc. I've re-uploaded my CSS file and then cleared the cache in Firefox. But to no avail. For some reason Firefox seems to be ignoring or not seeing my Flexbox properties in my style.css file.

I have no idea what could be causing this. Any idea what I'm missing? Suggestions on what I'm doing wrong?

The website in question is: www.jennhinkle.com/mark

The CSS code in question is (maybe someone else can catch my typo :) ):

.nav a {
    text-decoration: none;
    color: #FFF;
    display: block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 15px;
    float: left;
    text-align: center;
}

.nav {
    display: -webkit-box;
    display: -moz-box;         
    display: -ms-flexbox;      
    display: -webkit-flex;
    display: flex; 
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-flexbox-orient: horizontal;
    -webkit-flex-orient: horizontal;
    flex-orient: horizontal;
    width: 700px;
    margin: auto;
    padding: 12px;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

As always, thanks for any help!! Jenn

3 Answers

Leslie Phifer
Leslie Phifer
21,450 Points

Box-orient and flex-orient are not supported. Using flex-direction: row instead should do the trick.

James Barnett
James Barnett
39,199 Points

It's probably not advisable to use Flexbox in production as there's no support in IE 9 and below.

Try this: http://codepen.io/jamesbarnett/pen/ijhkm

It's using prefix free to simple the prefixes.

Jennifer Hinkle
Jennifer Hinkle
8,365 Points

Hello,

Thanks for the advice! I've been struggling with this now for a while, and I decided I would just remove flexbox and just use floats, etc, to get the same affect. I figured out the code I wanted, added it to my CSS and uploaded it to my server. But for some reason the new CSS is not being applied. I've re-downloaded the CSS from the server to check it's correct. I've cleared my cache from my browsers (Chrome, Firefox, and Opera), and for some reason it's still not showing up! The CSS being shown is the same as when I originally uploaded it. I have no clue what I could be doing wrong. Any ideas on what's happening? Maybe it has something to do with Wordpress since it's a theme I've built?

Thanks in advance for any help!

Jenn