My character sheet has some items which I want appear on hover. But they appear shifted down out of the box I want them to sit in and they nudge the button out of the way. Can someone tell me what CSS attribute I need to set to make to stop this happening. If i paste this code into stand alone files and open with chrome the shift down doesn't happen, so I think something is being inherited from somewhere. A reduced version of my HTML, which shows this behaviour looks like this <input type='hidden' class="sheet-activate_r1a" name="attr_controller_r1a" value='active'> r1a <div> <label><input type="radio" name="attr_controller_r1a" value="active" checked><span>active</span></label> <label><input type="radio" name="attr_controller_r1a" value="inactive"><span>inactive</span></label> </div> <div class ="sheet-item-resources_title sheet-rotated">Resources</div> <div class ="sheet-griditem sheet-item-resources_body"> <ul> <li> <label><input type="text" name="attr_resource1_txt"/></label> <div class="sheet-styled-select2"> <ul> <li><label class="sheet-result_r1a"><input type="checkbox" name="attr_resource1a" value="d10"><img src="<a href="http://www.thefirstcity.co.uk/rpg/dice/d10.jpg" rel="nofollow">http://www.thefirstcity.co.uk/rpg/dice/d10.jpg</a>" alt="d10" width="32" height="32" border="0" align="middle" /></label></li> <li><label><input type="checkbox" name="attr_resource1b" value="d10"><img src="<a href="http://www.thefirstcity.co.uk/rpg/dice/d10.jpg" rel="nofollow">http://www.thefirstcity.co.uk/rpg/dice/d10.jpg</a>" alt="d10" width="32" height="32" border="0" align="middle" /></label></li> </ul> </div> <button type="roll" value="!power --whisper|gm --name|Reset resource [@{resource1_txt}](!resource_reset,@{character_id},resource1)" name="reset_res1">Request reset</button> </li> </ul> </div> and my css like this ul { list-style: none; } .sheet-rotated { writing-mode: vertical-lr; background-color: #80cbc4; border: 1px solid green; padding: 20px; font-size: 40px; } .sheet-styled-select2 { margin: 5px; padding: 0px; border: 2px solid pink; /*width: 180px;*/ height: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sheet-styled-select2 > ul { list-style: none; padding: 0px; margin: 0px; } .sheet-styled-select2 > ul > li > label > img { opacity: 0.4; filter: alpha(opacity=40); float:left; display: none; vertical-align:top; } .sheet-styled-select2 > ul > li > label > input[type="checkbox"] { visibility: hidden; display: none; } .sheet-styled-select2 > ul > li > label > input[type="checkbox"]:checked + img { display: block; float:left; opacity: 1; filter: alpha(opacity=100); } .sheet-styled-select2:hover ul > li > label > img { display: block; } .sheet-activate_r1a[value*="active"] ~ *{ --display_r1a:block; } .sheet-activate_r1a[value*="inactive"] ~ *{ --display_r1a:none; } .sheet-styled-select2:hover ul > li > label.sheet-result_r1a > img { display:var(--display_r1a); }