Hey there! I'm facing a little issue with my code. It renders correctly on Chrome (to the right), but on Firefox (to the left) it's a bit off. Any suggestions on how I can fix this? It usually corrects itself after a refresh (zoom in/out), but almost always appears wrong on the first render.
Here's the HTML:
<td>
<label class="fb" for="11">
<div class="strokeme"> asdf 8</div>
<input id="11" type="checkbox" name="fb" value="11">
<img src="http://placehold.it/100/780000&text=%20">
</label>
</td>
And here's the CSS:
.fb > input[type=checkbox]{
display:none;
}
input[type=checkbox] + img{
cursor:pointer;
border:5px solid transparent;
opacity:.1;
}
input[type=checkbox]:checked + img{
border:5px solid #00f000;
opacity:1;
}
.fb {
position:relative;
}
.fb div {
position:absolute;
margin:4px;
text-align: center;
font-weight:bold;
}
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}