The conversion of HTML CSS list bullets to images is not functioning properly

Is there a way to change the bullet point of an li list to an image background? I have tried implementing it, but the image does not appear. Strangely, other images set as li backgrounds are also not showing up. My HTML code is validated by W3Validator, so why isn't my HTML li working?

How can I ensure that my li displays as an image?

This is the code snippet I've used.

 .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>
... (content continued) ...
                    </tr>
                  <tr>
                    <td height="28" colspan="2"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

htmlcss

Answer №1

It appears that there are no unordered lists present in the HTML code provided. Without a list, the <li> element cannot be used to display your image.

If you intend to have two separate lists displaying images (one with Cross.jpg and one with tick.gif), the list-style-image should be applied to your <ul> tags rather than the <li> tags. Your CSS code should be structured like this:

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 markup should resemble the following:

<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 wish to have unique images for each list item, background images must be utilized for individual items. In such a scenario, your CSS would appear as follows:

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;
}

The corresponding HTML structure should be:

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

Additionally, note that nesting <li> elements within a <table> is not considered valid HTML according to the standards specified by the W3C. <li> elements should be nested within either <ul> or <ol> elements.

Answer №2

To ensure that you are not unintentionally changing the style of your li elements in another stylesheet, make sure to include the following code in both the li.cross and li.tick classes:

display: list-item;

For reference:

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

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

UPDATE:

After reviewing your website, it appears that there is a conflicting style rule causing the bullets to be hidden:

https://example.com/image.png

If you prefer not to relocate this second CSS file, use the solution provided in this answer to override the problematic value in your CSS classes.

Take a look at this animation for further clarification:

https://example.com/animation.gif

Answer №3

I kindly request that you exclude my website link from your response. While I appreciate the vote up, I prioritize privacy and would prefer not to share my website with others. Please refrain from including any URLs in your answer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

htmlcss

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

Achieving successful content loading through AJAX using the .load function

Our website features a layout where product listings are displayed on the left side, with the selected product appearing on the right side (all on the same page). Initially, when the page loads, the first product is shown on the right. Upon clicking a new ...

javascriptphpjqueryhtmlajax

Cannot set value with document.getElementById() function

Here is the code snippet that seems to be causing an issue: <h1 id="test">15</h1> setTimeout(() => { console.log("awesome"); document.getElementById("test").value = 10; }, 2000); Even though awesome ge ...

javascripthtml

Ways to Halt Every Single CSS Animation

Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused& ...

jquerycssanimationcss-animations

Preventing undesired form submissions in HTML and JavaScript

My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...

javascriptjqueryhtmlforms

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

How to focus on a dynamically changing input box in Vue

In my form, users can input an email address and click a plus button to add another input box for a new email address. These input boxes are created by iterating over an array, so when the user clicks on the plus icon, a new entry is added to the array. W ...

javascripthtmlvue.jsvuejs2

Combining the elements within an array of integers

Can anyone provide insight on how to sum the contents of an integer array using a for loop? I seem to be stuck with my current logic. Below is the code I've been working on: <p id='para'></p> var someArray = [1,2,3,4,5]; funct ...

javascripthtmlfor-loop

A step-by-step guide on deleting an element within a div using jQuery

I am attempting to delete an HTML element using JQuery like this $('#' + divId + ' .settings_class').remove('.print_settings'); This code does not result in an error or remove the specified html element, however, the selecto ...

javascriptjqueryhtml

Stop browser from downloading attached file

<a href="/scripts/script.pde" target="_blank"></a> My goal is to have the browser show this file as text in a new window. Once clicked, it will be downloaded onto the user's computer. ...

htmltexthyperlinkhref

Combining two XPaths into a single XPath can be achieved by using various

HTML <li class="wdappchrome-ai" data-automation-id="searchInputAutoCompleteResult" tabindex="-2" aria-posinset="1" aria-setsize="3"> <span data-automation-id="searchInputAutoCompleteResultFullText"> <span style="font-weight:500"> ...

javahtmlxpathselenium-webdriver

Difficulty encountered in setting margin to 0 in Bootstrap 4 framework

Upon observation, I found that setting margin: 0px had no effect. Even after specifying a margin of 0 for left and right, the screenshot still displayed the margin. https://i.sstatic.net/mkYsO.png Initially, I checked for any conflicting classes or IDs c ...

cssbootstrap-4

Debugging needed for HTML Wamp

After successfully building a page, everything seemed to be working perfectly fine as shown below: However, when I copied my folder to C:\wamp\www\myFolder and accessed it through localhost using WAMP Server, the display looked like this: ...

htmlcsswampwampserver

Incorporate additional form element functionalities using radio inputs

Recently, I created code that allows a user to duplicate form elements and add values by clicking on "add more". Everything is functioning properly except for the radio inputs. I am currently stuck on this issue. Does anyone have any suggestions on how I c ...

javascriptjqueryhtml

Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen ...

javascripthtmljquerycss

Transfer information through req.body from one HTML file to another using Express

I'm having an issue with importing data from a form page on my express server. Currently, the home get request leads to a form page and after submitting the form, the data is stored in req.body as a JSON. I can successfully log this information to th ...

javascripthtmlexpressimportexport

Tips for Centering Text next to Logo on Mobile Display with Bootstrap 5

My website I've designed with Bootstrap 5 is facing responsiveness issues. While everything looks fine on desktop, the text and logo are misaligned in the mobile view. Here are screenshots demonstrating the problem: https://i.sstatic.net/jA5QTfFd.jp ...

htmltwitter-bootstrapbootstrap-5

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

My Jquery code seems to break after the second form submission. Could it be related to Django, Ajax, or Jquery?

I have a toggle button that allows users to follow or unfollow. The jQuery is working on the first submit, but when I toggle the button again, the elements don't change. html {% for user in followers %} <div class="flist" id="fl ...

htmljquerydjangoajax