Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 FlexBox Doesn't Display Correctly In Firefox 22

CSS3 FlexBox Doesn't Display Correctly In Firefox 22

Problem

For some reason a project I'm working on in Firefox 22 won't display correctly. In works fine in webkit browsers (tested in Opera 15 and Chrome 27; Safari won't support the updated spec until 7.0). Everything is just grouped together in rows, so my first thought was to change flex-direction to column instead of row, but that didn't even help.

* {
margin:0;
padding:0;
}
body {
     background: none repeat scroll 0% 0% #ECF1E1;
     color: #FFFFFF;
     font-size: 100%;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     width:100%;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     overflow-x:hidden;
}
#content {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px 5px 5px 5px;
     border: 5px outset #FF6600;
     margin: 0% .25%;
     -webkit-flex:2;
     flex: 2;
     padding:0% 1.3%;
}
#login {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px;
     border: 5px outset #FF6600;
     flex:1;     
     -webkit-flex:1;
     padding:10px;
     margin: 0% .25%;   
}
footer#footer {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-top: 5px outset #FF6600;
     height: 50px;
     padding: 0% 1%;
     text-align:center;
     clear:both;
     width:100%;
     margin: 2% 0% 0% 0%;
}

Its supposed to be a 2 column layout (on desktops, anyway), but like I said everything is bunched together at the top of the page in Firefox 22 in a row.

Problem courtesy of: Azrael

Solution

Firefox does not support wrapping. To hide Flexbox from Firefox until the day that it does finally support wrapping, use a feature query:

@supports (flex-wrap: wrap) {
    body {
        display: flex;
    }
}

You only need to hide the display property, all of the other Flexbox properties will be ignored without it.

Solution courtesy of: cimmanon

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 FlexBox Doesn't Display Correctly In Firefox 22

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×