SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox Image Next to a List Entry

    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. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •