810 810 - 5 months ago 24
CSS Question

Flexbox and Float issues on Chrome/Firefox

There is a float issue when i use a flex svg image on chrome and firefox, only it showed correct on IE.

The rating is showed half on the other column.

Framework: Bootstrap 2

Bootplay: http://www.bootply.com/KQKMnpHtdL

CSS

/* CSS used here will be applied after bootstrap.css */
#krating {
display: inline-block;
left: 4px;
position: relative;
top: 4px;
}
#krating-top {
float: right;
}
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 14px;
-ms-flex: 0 0 14px;
flex: 0 0 14px;
height: 14px;
background: url('https://www.newf1.nl/components/com_kunena/template/crypsis/assets/images/stars.svg');
background-size: 200%;
background-position: 0 0;
cursor: pointer;
}
.c-rating__item.is-active {
background-position: -14px 0;
}
.c-rating__item .is-active:hover {
background-position: 0;
}


HTML

<td class="span5">
<div class="krow">
<a title="View Topic 'J SH hs cj sdchj dhs chds cjhsdc hds cjsd cjds cjs'" class="hasTooltip topictitle" href="/develop/forum/welcome-mat/50-j-sh-hs-cj-sdchj-dhs-chds-cjhsdc-hds-cjsd-cjds-cjs" rel="nofollow">J SH hs cj sdchj dhs chds cjhsdc hds cjsd cjds cjs</a>
<div id="krating-top">
<ul class="c-rating">
<li class="c-rating__item is-active" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active" data-index="4"></li>
</ul>
</div>
</div>
<div class="hidden-phone">
Topic started 3 hours 50 minutes ago,
by
<a title="View admin's Profile" class="kwho-admin" href="/develop/forum/user/237-admin" rel="nofollow">admin</a>
</div>
</td>


See here the changes between browsers

Answer

You need to specify a width for your rating icons.

.c-rating__item {
  width: 14px;
}

You can see it working here in this new bootply: http://www.bootply.com/12LbfUB0IF

*Note that you have 'localhost' images referenced in your CSS, so we aren't able to see them.

Comments