[HELP] CSS Conundrum: Shifting Input

I'm trying to display an image when a checkbox is clicked. &nbsp;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: &lt;td class='sheet-wtd'&gt;&lt;input class='sheet-wound' type='checkbox' name='wounds1' value='1' /&gt;&lt;span class='sheet-wound'&gt;&lt;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;"&gt;&lt;/img&gt;&lt;/span&gt;&lt;/td&gt; (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&nbsp;overlooked? It's driving me crazy... :-/

Try adding vertical-align: baseline; to .charsheet input.sheet-wound { width: 44px; height: 34px; opacity: 0; margin: 0px; padding: 0px; z-index: 999; display: inline-block;&nbsp; vertical-align: baseline; }

Thanks, Vince, while that wasn't perfect, it did set me on the right path...I had to use a combination of vertical-align: top (for the input) and vertical-align: middle (for the span). And for anyone really paying attention, I did catch that the input name was missing the attr_ (and that's been corrected). :)

My coding tool of choice;

Heading to Home Depot right now...gotta get me one of them... LOL

or just borrow one of CPP's&nbsp; hammers

BAHAHAHA

Looks like both the input and the span are inline-block elements, so when you make the span appear it pushes the input down. If you add a position: absolute property to the span, it won't push things away. Adding a z-index: -1 property to the span will prevent it from blocking the input. .charsheet .sheet-wtd, .charsheet .sheet-ftd { &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;border-style: solid; &nbsp;&nbsp; &nbsp;border-color: black; &nbsp;&nbsp; &nbsp;letter-spacing: normal; } .charsheet input.sheet-wound { &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;opacity: 0; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;z-index: 999; &nbsp;&nbsp; &nbsp;display: inline-block; } .charsheet span.sheet-wound { &nbsp;&nbsp; &nbsp;display: none; &nbsp;&nbsp; &nbsp;width: 44px; &nbsp;&nbsp; &nbsp;height: 34px; &nbsp;&nbsp; &nbsp;margin: 0px; &nbsp;&nbsp; &nbsp;padding: 0px; &nbsp;&nbsp; &nbsp;margin-left: -44px; &nbsp;&nbsp; &nbsp;vertical-align: center; &nbsp;&nbsp; &nbsp;text-align: center; &nbsp;&nbsp; &nbsp; z-index: -1; } .charsheet input.sheet-wound:checked + span.sheet-wound { &nbsp;&nbsp; &nbsp;display: inline-block; &nbsp;&nbsp; &nbsp; position: absolute; } .charsheet .sheet-wtd { &nbsp;&nbsp; &nbsp;border-width: 2px 1px 1px 1px; }

You mean you don't have to use hammer?&nbsp; ;-P In all seriousness, your example is proof that I often settle for the first apparent solution I find when trying to solve layout issues.&nbsp; I appreciate your approach and explanation. Thanks