I'm trying to display an image when a checkbox is clicked. I've done stuff like this before, so am stumped as to why my input box keeps shifting down when it gets clicked... Using the Chrome Dev tools, I know it's the checkbox that's shifting down and the span is where it should be. Here's HTML: <td class='sheet-wtd'><input class='sheet-wound' type='checkbox' name='wounds1' value='1' /><span class='sheet-wound'><img src="<a href="http://www.geeksville.us/roll20/hand_drawn_x_small.png" rel="nofollow">http://www.geeksville.us/roll20/hand_drawn_x_small.png</a>" style="width:44px; height: 34px;"></img></span></td> (I know I'm using a table, but for this small thing, I figured it'd be ok...I should have known my shame would be made public) CSS: .charsheet .sheet-wtd,
.charsheet .sheet-ftd {
width: 44px;
height: 34px;
margin: 0px;
padding: 0px;
border-style: solid;
border-color: black;
letter-spacing: normal;
}
.charsheet input.sheet-wound {
width: 44px;
height: 34px;
opacity: 0;
margin: 0px;
padding: 0px;
z-index: 999;
display: inline-block;
}
.charsheet span.sheet-wound {
display: none;
width: 44px;
height: 34px;
margin: 0px;
padding: 0px;
margin-left: -44px;
vertical-align: center;
text-align: center;
}
.charsheet input.sheet-wound:checked + span.sheet-wound {
display: inline-block;
}
.charsheet .sheet-wtd {
border-width: 2px 1px 1px 1px;
}
So...what have I overlooked? It's driving me crazy... :-/