i have series of values checkboxes pre-checked on page. , work fine in browsers, except safari. when click on of checkboxes 'jump' or 'drop' down , move position.
i did research, didn't find how keep boxes moving.
here code checkbox:
<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">nacelle<span class="counts" id="n-count"></span></span><br /> <input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">blade/rotor<span class="counts" id="b-count"></span></span><br /> <input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">tower<span class="counts" id="t-count"></span></span><br /> <input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">foundation<span class="counts" id="f-count"></span></span><br /> <input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">transmission/electrical<span class="counts" id="tr-count"></span></span><br /> <input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">offshore services<span class="counts" id="o-count"></span></span><br /> <input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">professional services<span class="counts" id="p-count"></span></span><br /> <input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">field services<span class="counts" id="fi-count"></span></span><br /> <input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">research/workforce dev<span class="counts" id="r-count"></span></span></p>
here css:
input[type="checkbox"] { width: 25px; height: 25px; -webkit-transform: scale(1.3,1.3); display: inline-block; margin-right: 5px; border: 1px solid #0070bb; }
how style checkboxes stationary , change state when clicked?
the issue width
, height
properties. why matters anyones guess, , can't find information on issue. seems width , height attributes work default state of box, gets thrown out while rendering transition between initial , alternate state.
the best solution be:
input[type="checkbox"] { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); display: inline-block; margin-right: 5px; border: 1px solid #0070bb; }
you can use conditional comment target older versions of ie (if support them) , add explicit height , width style you're looking for:
<!--[if lt ie 9]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]-->