List style image does not serve its intended purpose

I attempted to personalize my webpage by adding an image to a list, but I couldn't get the list-style image to work.

You can view the page at

Below is the code I used:

CSS

/* Fleet List */

ul#flotta li
{
list-style-image:url("http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png"); 
}

(I also tried using ../07/freccia.png for the URL)

MY PAGE

<ul id="flotta">
<li>Augusta 109 (06 pax / 300 k/h)</li>
<li>Augusta 206 (04 pax / 240 k/h)</li>
<li>Robinson R44 (03 pax / 200 k/h)</li>
<li>Robinson R22 (01 pax / 180 k/h)</li>
<li>Cessna (10 pax)</li>
<li>Mercedes S series</li>
</ul>

However, I cannot see the image on the list. What am I doing wrong? Can someone help me figure this out? Thank you!

csshtmlimageliststyles

Answer №1

Your list style images are currently hidden due to being shifted to the left within your container. To rectify this issue, follow these steps:

Begin by eliminating article ul li:before, as it is causing displacement and introducing an unnecessary circle.

Next, modify the following CSS line:

article ul li, article ol li {
    line-height: 25px;
    position: relative;
    list-style-image: url('http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png');
    left: 30px;
}

Note that while this may not be precisely the style you desire, it will assist you in locating the image placement.

Answer №2

Seems like there might be an issue with the CSS selector here: try using just #flotta instead of ul#flotta il. Since IDs are unique by definition, specifying the tag type is unnecessary. Also, it appears that there could be a problem with the file path as I couldn't access the image when clicking on the link provided. Furthermore, it's common practice to include <style> tags within the <head> section of the HTML document rather than in the <body>. Best of luck!

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

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

jqueryhtmlcssajax

Ways to determine if an element has exceeded its container's boundaries

After creating the codesandbox, I have developed a webapp that heavily relies on user input. To keep it simple for demonstration purposes, I am displaying various authors on an A4 formatted page using `page` and `font-size` with the `vw` unit for responsiv ...

javascripthtmlcssvue.jsvuejs2

Exploring Angular 7: Understanding the HTML5 Fullscreen API and Overcoming Errors

I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...

angularhtmltypescriptangular-clifullscreen

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

cssdompdf

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

Issue with PHP Upload: Index is undefined

Having Trouble with PHP Upload: Encountered an issue: Undefined index: file in Error on line: $count = count($_FILES['file']['name']); Tried numerous codes to fix this error, but none have worked so far PHP Code: <?php $count ...

javascriptphphtmlforms

JavaScript is failing to pass the argument value

Whenever I attempt to pass a value on an onclick=function('') function, the value does not seem to get passed correctly while ($row = mysqli_fetch_array($result)) { $id = $row['id']; echo '<a href="#" onclick="DeleteUse ...

javascriptphpjqueryhtmlajax

What is the best method for retrieving values from selected radio buttons?

I am trying to retrieve the values of the selected radio buttons with the name is_external example.html <div class="exter_inter"> External <input type="radio" name="is_external" value="1" <?php if(isset($_GET['status']) &&am ...

jqueryhtmlradio-button

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

htmlcss

Using jQuery to calculate mathematical operations in a form

I've been working on creating a form that calculates the total cost based on selected options. So far, I've managed to get it working for three options, but I'm stuck on how to calculate the subtotal by adding the variables "vpageprice" and ...

javascriptjqueryhtmlformsvariables

Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements .container { margin: 20px; } .parent, .child { outline: none; border: none; user-select: none; cursor: pointer; } <div class="container"> ...

htmlcss

Customizing Bootstrap icon with padding, background color, and radius settings

Struggling with Bootstrap Icons and Bootstrap 5, I attempted to create a perfect circle background behind an icon by setting padding, background color, and a rounded circle radius. The code I used was <i class="bi-globe-americas text-white p-3 bg-p ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-icons

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

javascriptjqueryhtml

Ways to avoid Bootstrap popovers from automatically breaking lines

I am struggling with adding a tooltip using Bootstrap's popover. Here is what I have tried: <ul> <li>Entry 1 ....................................................................</li> <li>Entry 2 ...................... ...

htmltwitter-bootstrappopover

node index of data that has been posted

My HTML file is quite straightforward: <form method="post" action="http://localhost:3000/post"> <input name="name" type="text"/><br /> <input name="last_name" type="text"/><br /> <button id="submit" type="submit"& ...

htmlnode.jsexpress

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

Eliminate both entries from the dictionary list if the value of the first key matches

details = [ {"id": "1", "name": "Bob", "age": 21, "student": "yes"}, {"id": "1", "name": "Mary", "age": 25, "student": "yes"}, {&quo ...

pythonlistdictionaryduplicates

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

javascriptcsshtml