Checkbox Image Next to a List Entry

HTML & CSS
1

I want to put a checkbox image in my list I am using this fo the CSS but it is not correct.

ul.hiddenbullet {

text-decoration: none;
background-color: #FFFFFF;
text-indent: 15px;
list-style-position: outside;
list-style-image: url(/CBO/images/ckbox.jpg);
list-style-type:none;
padding: 6px;
margin: 2px;
}

I want it to look like this: There will be a checkbox by each of the responses.

  1. I am satisfied with the New Employee Orientation (NEO) I received.
    Strongly Agree
    Agree
    Neither Agree or Disagree
    Disagree
    Strongly Disagree
    Not Applicable

Any suggestions would be great.

2

It may be that your margin isn’t big enough, and the image is rendering outside the element. Give it a little more left-margin and see what happens.

3

Hi,

The list-style-image is badly implemented in most browsers and for pixel perfect design I would use a background image in the list element instead which can be placed exactly where you want it using the background-position which is not possible with the list-style:image. Just add enough padding to the left of the list element to accommodate the image and ensure that the list item has enough height for the height of the image you are using (use min-height, line-height or padding).