2

I'm trying to have a custom checkbox input of sorts and I'm not quite sure where all of this padding is coming from..

The idea is that an image is displayed in place of a checkbox with text, and when it is selected the opacity of the image decreases to show a symbol underneath it, indicating that it is selected.

I boiled it down in this fiddle: http://jsfiddle.net/tx76J/1/

<li>
    <input id="1" type="checkbox">
    <label for="1">
        <figure>
            <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">          
        </figure>
    </label>
</li>​

enter image description here

kapa
  • 77,694
  • 21
  • 158
  • 175
actaeon
  • 695
  • 1
  • 8
  • 17

1 Answers1

8

  • Add list-style: none; to your li. The problem is caused by the list marker, you can see it if you remove the black background color (I'm sure that it is only for the demo, but for future visitors: li should always be present only in an ol or ul).

    enter image description here

  • Also, set the img to display: block to remove the space at the bottom. That appears because the image is considered to be inline by default (also explained in this question: White space at bottom of anchor tag SO).

jsFiddle Demo that shows it working

Community
  • 1
  • 1
kapa
  • 77,694
  • 21
  • 158
  • 175
  • I forgot to reset my list style on this, but the explanation for the `img` was really helpful! That totally makes sense – actaeon Jul 09 '12 at 16:14