The HTML list fails to show up on the page

I am working on creating a customizable and printable form using HTML, specifically for generating documents such as invoices and terms and conditions for my small business. I thought everything was correct, but...

Here is the HTML code:

<h1>Article 1</h1>
My Business agrees to provide services to the client in the following format:<br><br>
<ul>
   <li>Event: <span contenteditable>Event Name</span></li>
   <li>Date: <span contenteditable>Event Date</span></li>
   <li>Time: <span contenteditable>Arrival Time</span></li>
   <li>Location: <span contenteditable>Venue Address</span></li>
   <li>Service Provided: <span contenteditable>Agreed Upon Service</span></li>                
</ul>

CSS:

li { margin-left: 25px; list-style-type: square;}

Everything appeared perfectly when viewed locally in Google Chrome:

However, upon uploading it to my webserver and viewing the page online, all the formatting disappeared in Google Chrome:

What could have gone wrong?

csshtmllisthtml-lists

Answer №1

There are a couple of potential reasons for this issue:

  1. The CSS file may not have been included correctly.
  2. You might be overriding the style, consider using a more specific selector or removing the override.

The latter is more likely given that the heading appears to be different as well.

Update: In addition, make sure to apply the list-style-type to the ul and add some padding if the list-style-position is set to outside (You can refer to this fiddle for reference: http://jsfiddle.net/aye2y/). This adjustment may be necessary if you are using a CSS reset exclusively online.

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

Chai can't verify the HTML component

During my testing of an Angular project, I initially used Jasmine to check if a specific attribute of an HTML element exists. The following code snippet worked successfully for me: expect(element(by.css("*[id='ref_button']")).getAttribute(&ap ...

javascripthtmlangulartestingchai

The JavaScript API for YouTube - when the state changes

I am facing a challenge while trying to embed a YouTube video onto one of our customer's websites. The requirement is for the video to display an image once it has finished playing. My initial approach was to remove the containing div so that an under ...

javascripthtmljqueryyoutube-apijquery-events

The CSS styles are failing to be applied to the submit button once it has been

When I have a form with a submit button that triggers a form submission on a PHP page, I want to have an onclick event on the submit button that changes its opacity using JavaScript. The issue I am facing is that after clicking the submit button, the opaci ...

javascriptcss

The issue of overlapping divs causing links to be unresponsive

I am currently working on developing a Shopify theme that utilizes the 960 grid system. Here is the layout I have implemented: <div id="header" class="container_16"> <!-- positioned relatively --> <div id="tl_overlay"></div> ...

csslayouthtmloverlap

What is the process for search engines or screen readers to extract inline tags?

Consider this scenario: the heading has normal font weight, but specific parts are written in bold. Let's look at the following example: <h1>20<span>14</span> Stack<span>overflow</span> takes over</h1> How do sear ...

htmlsearch-enginescreen-readers

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated.https://i.sstatic.net/daavn.pn ...

javascriptpythonhtmlcssdjango

Transferring data between pages using HTML5 and jQuery

I'm currently developing Windows Phone 8 apps using HTML5 and jQuery. My project involves two HTML pages - the first page consists of input boxes and a button, while the second page contains controls to display the data entered on the first page. Upon ...

jqueryhtmlwindows-phone-8

Group lists based on the output of a specific function in Python

When working with two lists in Python, such as l1 and l2, leveraging the zip(l1, l2) function allows for the creation of a list of tuples containing elements from both lists. Now, consider having two functions, f1 and f2. The goal is to generate a list of ...

pythonlistpython-itertoolspython-zip

Selenium for handling multiple input fields

Having some trouble figuring out how to input values for selecting a building. Initially, there are two empty input fields for selecting a building. As you enter one, it should add an additional empty input field. I'm struggling with the indexing and ...

pythonhtmlselenium

The content does not fill the entire page's height

I am facing an issue with a linear-gradient background image that does not extend to cover the entire content height. I have experimented with different solutions like using min-height: 100% and adjusting the positioning of the html and about-body divs, b ...

htmlcss

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

javascripthtmlcssangular

How about "Switching Background Images Using a Click Trigger"?

I have a single web page with three different tabs. By clicking on each tab, the text displayed changes accordingly. I am looking to add three separate images for each tab so that when a user clicks on a specific tab, the image associated with it also chan ...

jqueryhtmlcsswordpress

Inaccuracy of Canvas Drawing in Adobe Flash CC HTML5 Publishing

Let's start with the images: Comparison Of Various Publishing Techniques From Flash CC There seems to be a significant discrepancy between what is published through Flash CC HTML5 with CreateJS and what is actually created in the program, even thoug ...

htmlflashcanvaspublishcreatejs

Two-column Bootstrap 4 collapsible navigation bar

How can I display my collapsed navbar in 2 columns using Bootstrap 4? Here is what the fullsize navbar looks like: http://prntscr.com/kymuzq And here is the collapsed navbar: http://prntscr.com/kymtun Does anyone know an easy way to make the collapsed ...

htmlcsstwitter-bootstrapbootstrap-4

Implementing css padding to text preceding images

My content includes text and images in a mix, and I wish to add CSS margin to elements that appear directly before and after the images. Unfortunately, the placement of these elements can vary and is beyond my control. The code snippet below demonstrates ...

htmlcss

How to determine button placement based on the content present on the page

I'm struggling to find the right CSS positioning for a button on my page. I want the button to stay fixed in a specific location, but when there's a lot of content on the page, I need it to adjust its position accordingly. Initially, I want the ...

javascripthtmlcssbuttoncss-position

Initially, my PDF file does not get selected, except in the Internet Explorer browser

I am currently facing an issue with selecting PDF files in Internet Explorer. The process works smoothly in Google Chrome, but I encounter a problem when trying to select PDFs in IE. Specifically, when I attempt to select a PDF for the first time in Inter ...

javascriptjqueryhtmlinternet-explorer

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss