Working on incorporating the flexible box model into my website has been a bit challenging. It seems to function well in webkit-based browsers like Chrome and Safari, but I'm running into issues with Mozilla, Opera, and most notably Internet Explorer. Despite defining the necessary properties including -ms-box-.. alongside others in my CSS stylesheet for the .holder class and #new_div id, IE just won't cooperate. Here's a snippet of the code:
.holder
{
width:100%;
margin:auto;
display:-webkit-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-box-orient:vertical;
-pie-box-orient:vertical;
-moz-box-flex:1;
-o-box-flex:1;
-ms-box-flex:1;
-box-flex:1;
-pie-box-flex:1;
-webkit-box-flex:1;
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-pie-box-pack:center;
-box-pack:center;
text-align:center;
behavior: url(../../Content/pie/PIE.htc);
}
.holder #new_div
{
width:940px;
}
.holder div
{
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-box-pack:center;
-pie-box-pack:center;
behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
margin:auto;
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie-box;
text-align:left;
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
-ms-box-flex:1;
-box-flex:1;
-pie-box:1;
-webkit-box-pack:center;
-box-pack:center;
-moz-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-pie-box-pack:center;
background-color:#25282D;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-box-orient:horizontal;
-pie-box-orient:horizontal;
min-width:940px;
padding:20px;
behavior: url(../../Content/pie/PIE.htc);
}
I've explored solutions like using the CSS3Pie library and even attempting to install chrome plugins for IE, but nothing seems to work. Could there be a syntax error in my existing CSS causing this issue specifically in Internet Explorer? Any ideas or suggestions would be greatly appreciated!