nealrm
03-14-2014, 05:09 PM
I'm trying to align some button above an image. This works great for most browsers except android. For some reason, when I use float the buttons disappear. Take out the float statement, the buttons are there. Put it in, they are gone. Here is the CSS:
.PhotoButtons{ width:100%;
float:Left;
padding-bottom:2px;
display:-webkit-box;
display:flex;
}
.PhotoButtons button {
-webkit-box-flex:2;
-webkit-box-direction:row;
flex:1;
display:inline-block;
font-size:.65em;
margin-left:0px;
margin-right:0px;
padding:2px;
height:auto;
word-wrap:normal;
border:1px solid darkgray;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ABABAB), color-stop(1, #F5F5F5));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #ABABAB 0%, #F5F5F5 100%);
}
.no-flexbox .PhotoButtons {
overflow:visible;
background-color:blue;
}
.no-flexbox .PhotoButtons button {
float:left;
width:14.2857%;
vertical-align:top;
}
.PhotoButtons{ width:100%;
float:Left;
padding-bottom:2px;
display:-webkit-box;
display:flex;
}
.PhotoButtons button {
-webkit-box-flex:2;
-webkit-box-direction:row;
flex:1;
display:inline-block;
font-size:.65em;
margin-left:0px;
margin-right:0px;
padding:2px;
height:auto;
word-wrap:normal;
border:1px solid darkgray;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ABABAB), color-stop(1, #F5F5F5));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #ABABAB 0%, #F5F5F5 100%);
}
.no-flexbox .PhotoButtons {
overflow:visible;
background-color:blue;
}
.no-flexbox .PhotoButtons button {
float:left;
width:14.2857%;
vertical-align:top;
}