HTML CSS列表项目符号到图像不起作用

Question

I want to change the li bullet to image background but it doesn't work and the image does not show. The same image of li background does not show. My HTML code is right according to W3Validator. Then why is my HTML li not working?

How do I make my li show in an image?

I used this code.

  .heading{ font: bold 11px verdana; color:#525252; } .altheading{ font: bold 14px verdana; color:#C70C1F; } .bodies{ font: 10px verdana; color:#303030; } .gheading{ font: 12px MS Reference Sans Serif, Tahoma; color:#335784; } .gbodiesR{ font: 12px MS Reference Sans Serif, Tahoma; color:#C70C1F;font-weight: 450; } .gbodiesG{ font: 12px MS Reference Sans Serif, Tahoma; color:#006600; font-weight: 450; } li.cross{ list-style-image: url('https://shivkumar.in.net/Cross.jpg'); padding: 0 0 0 10px; } li.tick{ list-style-image: url('https://shivkumar.in.net/tick.gif'); padding: 0 0 0 10px; } .phis_ico{ background-image:url("https://shivkumar.in.net/phish914.jpg"); background-repeat:no-repeat; background-position:right; opacity: 1; filter: alpha(opacity=80); } 

 <table bgcolor="#D4281E" align="center" width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td> <table bgcolor="#FFF" width="100%" border="02" cellpadding="0" cellspacing="0"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="phis_ico"> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td colspan="2" class="altheading" valign= "center" align="center"> <u>Top Title</u> </td> </tr> <tr> <td height="10" colspan="2"></td> </tr> <tr> <td colspan="2" class="gheading" valign= "center" align="center"> <p align="justify" style="padding: 0 10px 0 10px;"> please help bepowbis my code </p> </td> </tr> <tr> <td height="10" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph. </td> </tr> <tr> <td class="gbodies"> <li class="cross"> </td> <td align="left" class="gbodiesR"> I am red cross paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="8" colspan="2"></td> </tr> <tr> <td class="gbodies"> <li class="tick"> </td> <td align="left" class="gbodiesG"> I am green paragraph </td> </tr> <tr> <td height="38" colspan="2"></td> </tr> <tr> <td colspan="2" align="center"> <a href="#"><img src= "https://unionbankonline.co.in/pics/Conti3.jpg" border="0" id="continue" /></a> </td> </tr> <tr> <td height="28" colspan="2"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> 

Answer 1

First of all, I see no unordered lists in your HTML code. If there is no list, there is no <li> element to render your image.

If your goal is to have two lists (one with your Cross.jpg and one with your tick.gif) then list-style-image should be attached to your <ul> tags, not your <li> tags. So your CSS would look like:

ul.cross {
  list-style-image: url('https://shivkumar.in.net/Cross.jpg'); 
  padding: 0 0 0 10px;
  }

ul.tick {
  list-style-image: url('https://shivkumar.in.net/tick.gif'); 
  padding: 0 0 0 10px; 
  }

Your HTML would look like this:

<ul class="cross">
  <li>List Item Here</li>
  <li>List Item Here</li>
  <li>List Item Here</li>
</ul>

<ul class="tick">
  <li>List Item Here</li>
  <li>List Item Here</li>
  <li>List Item Here</li>
</ul>

If you are trying to allow for different images on different list items, you will need to create background images for each: In this case your CSS will look like this:

ul {
  list-style: none;
  }

li.cross {
  background: url('https://shivkumar.in.net/Cross.jpg')no-repeat;
  }

li.tick {
  background: url('https://shivkumar.in.net/tick.gif')no-repeat;
  }

and your HTML would look like this:

<ul>
  <li class="cross"></li>
  <li class="tick"></li>
</ul>

EDIT: Just expanded your snippet and saw the <li> tags nested within your <table> . This is not valid HTML . <li> elements should be children of <ul> or <ol> elements.

Answer 2

Just to be sure you're not overriding your li style in another stylesheet add the following to both li.cross and li.tick classes

display: list-item;

See:

li.cross{
    list-style-image: url('https://shivkumar.in.net/Cross.jpg'); 
    padding: 0 0 0 10px;
    display: list-item;
}

li.tick{
    list-style-image: url('https://shivkumar.in.net/tick.gif'); 
    padding: 0 0 0 10px;
    display: list-item;
}

EDIT:

Looking at your site, you indeed have a conflicting style rule that is hidding your bullets:

If you dont wan't to move this second css file, use the fix in this answer to override that value in your css classes.

Please see this gif:

Answer 3

Please remove the my website url from your answer, I vote up it but for my priority or privacy I don't want to share my website to anyone. Please remove all url from your answer.