There was an post here at Stack yesterday where someone wanted this description list snippet:
<dl>
<dt>term1</dt><dd>defn1</dd>
<dt>term2</dt><dd>defn2</dd>
<dt>term3</dt><dd>defn3</dd>
</dl>
To display in this format:
term1 term2 term3
defn1 defn2 defn3
This is the css solution that I came up with:
div {
width: 50%;
}
dl {
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
dt {
-webkit-box-flex: 0 0 30%; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 0 0 30%; /* OLD - Firefox 19- */
-moz-flex: 0 0 30%;
-webkit-flex: 0 0 30%; /* Chrome */
-ms-flex: 0 0 30%; /* IE 10 */
flex: 0 0 30%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
dd {
-webkit-box-flex: 0 0 30%; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 0 0 30%; /* OLD - Firefox 19- */
-moz-flex: 0 0 30%;
-webkit-flex: 0 0 30%; /* Chrome */
-ms-flex: 0 0 30%; /* IE 10 */
flex: 0 0 30%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
margin-left: 0;
}
My problem is, and I looked thoroughly, that this css solution does not work in Safari browser only. There are exclamation marks next to display: flex and flex-wrap in the Safari browser inspector. Does anyone have any suggestions?
