Formatting issue with Internet explorer and Chrome

Question

I have formatted a list into three columns with borders. When I view the list with Firefox, the list is formatted perfectly, but when I view the list in Chrome the formatting is slightly off and with Internet Explorer the formatting is even more off. I am looking for help identifying how to make the formatting look the same across the three browsers

Here is a jsfiddle link showing my list.

Here is the HTML:

<fieldset>
<legend>Automobiles:</legend>
<div class="tierGrp gm">
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="2" checked >Spark</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="8" checked >Sonic</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="32" checked >Cruze</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="10" checked >Malibu</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="17" checked >Impala</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="21" checked >SS Sedan</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="13" checked >Camero</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="29" checked >Corvette</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="9" checked >Motorsports</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="30" checked >Trax</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="25" checked >Equinox</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="27" checked >Traverse</label>
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="28" checked >Tahoe</label>
</div>
</fieldset>

Here is the CSS:

.tierGrp {
    align:center;
    text-align:center;
    font-size:26px;
    background-color:#EEE;
    width:625px;
    height:auto;
    display:block;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    }
.gm {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
    text-align:left;
}
.cars {
    font-size: 18px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:300;
    border:1px solid #3498DB;
    border-radius:5px;
    background:#EDF5FA 50% 50%;
    height:auto;
    min-width:100px !important;
    padding-left:5px;
    padding-right:5px;
    cursor: pointer;
}

I would appriciate any help fixing the formatting issue.

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

There seems to be a known bug in Chrome causing behaviour like this. See here, here and here for similar questions.

In your case, this seems to work:

.cars {
  -webkit-transform: translate3d(0,0,0);
}

JSFIDDLE

edited May 23 '17 at 12:17

Community

1
1

answered Feb 17 '17 at 19:34

sol

22,311
6
42
59

This solution resolves the chrome problem, but does not resolve I.E. issue. Do you know of a fix for I.E.? – James Feb 18 '17 at 18:38

Formatting issue with Internet explorer and Chrome

1 Answers1