css3 - -moz-box-flex is not flexing? Works with (Chrome/Webkit) -
i have been looking past 8 hours or trying find possibly missed in html/css code, yet firefox not flex page content? works in chrome (i've been making sure each -webkit-box-flex there -moz-box-flex vice versa). there i'm missing? time , appreciated!
* {margin: 0px; padding: 0px; } body {width: 100%; height: 1000px; display: -webkit-box; display: -moz-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; background-color: #696969; background-image: url(squairy_light.png); background-repeat: ; background-position:; } header, footer, article, nav, section, hgroup, aside {display: block; } #banner {display: block; margin-left: auto; margin-right: auto; padding: 30px 0px 0px 0px; } #fullpage_box {max-width: 1000px; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } #page_box {display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } #content_box {-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-box-orient: horizontal; -moz-box-orient: horisontal; box-orient: horizontal; padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px; margin: 5px 0px 5px 0px; }
eureka! found fix/problem.
the
> display: -moz-box; > display: -webkit-box;
should in parent folder (in case #page_box not both"). in case, worked. anyhow, css displayed in ascending order of parent > child. code below corrected code above. hope helps someone. drove me nuts.
#fullpage_box {max-width: 1000px; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } #page_box {display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } #content_box {-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px; margin: 5px 0px 5px 0px; }
Comments
Post a Comment