The UL list has a first list item that is being indented

While working on my Magento 1.9.x website, I noticed a strange issue with the product descriptions. The bulleted lists are displaying fine, except for the first bullet point which is indented more than the rest of the list.

Below is the code snippet I am using for the first product in a "LIST" view:

<p>The ERGL24054D-4000K upgrades your existing linear 2x4 fixtures in less than 10 minutes. Correlated color temperature (CCT) is 4000K. Deliver 5400 lumens of light and over 100 lumens per watt at the system level. MADE IN THE USA.</p>
<p><strong>Kit includes:</strong></p>
<ul>
<li>ERG Lighting dimmable LED driver</li>
<li>(2-4) LED light engine sticks</li>
<li>(8) Self-drilling screws</li>
<li>Wire nuts</li>
<li>Installation instructions</li>
<li>Opalescent film (optional)</li>
<li>Opalescent lens (optional)</li>
<li>Prismatic diffusers (optional)</li>
<li>Nea beam-shaping isotropic lens (optional)</li>
</ul>

You can see the end result here.

This issue seems to affect all products in the list. If anyone knows what might be causing this problem and how I can fix it, please let me know. Thank you!

I came across this article, but I'm unsure if it applies to version 1.9.

I also found this thread regarding the same issue, but it appears to be for version 1.4.

Answer №1

The top item on the list is currently floating above the paragraph element <p> that comes before it. To fix this, you can either eliminate the float property from the <p> tag or add a clear property to the first <li> element...

.products-list .desc > p{
 float:left /* remove this */
}

or

.products-list li:first-child{
  padding-top:20px;
  clear:left; /* add this */
}

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

Transform incorrectly formatted HTML into a PDF with Flying Saucer PDF Rendering technology

Within a project on GitHub, I am currently working on converting arbitrary HTML strings into PDF versions. This conversion involves parsing the HTML and rendering it into a PDF file. To accomplish this task, I am utilizing Flying Saucer PDF Rendering in t ...

How come this straightforward VueJS component template is appearing in the wrong location in the DOM, positioned above a table?

These illustrative examples are not the actual faulty code, but rather simplified for discussion purposes. Issue with Code The code snippet below displays a table, but unexpectedly places the Component values above the table element visually and in the D ...

Having trouble positioning items to the right in bootstrap

<div id="unique-content-wrapper"> <nav class="navbar navbar-expand-lg navbar-light bg-light" id=""> <button class="navbar-toggler" id="menu-toggle"><span class="mater ...

When a user clicks on the div, it expands in size and then returns to

I developed a small quiz, where clicking on an answer moves the checkmark to the clicked div. const answers = document.getElementsByClassName('answer'); [].forEach.call(answers, function(answer) { $(answer).click(function() { if (!answer ...

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

I'm currently working on developing a JavaScript whiteboard and have implemented the following code: let lastTimestamp = 0; const fps = 1000/60; document.addEventListener("pointermove", moveMouse, false); function moveMouse (e) { e.preve ...

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

HTML CSS margins are used to create white spaces at the edges of a webpage

My website is displaying white spaces on the edge and I want it to look seamless like this: Does anyone know where I went wrong? ...

Placing a graphic above every list item within my navigation bar

I want to customize my navigation menu by adding an image above the text. The image should be displayed above the text for each navigation item. Here is my HTML code: <ul class="nav"> <li class="whoweare"><a href="#">who we are</ ...

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

The tabber blinks rapidly as the page loads

Whenever the page loads, I notice that my tabber flickers. It doesn't display properly until the loading is complete in both FireFox and Chrome browsers. Is there a way to prevent this flickering issue? <div class="tabber"> <div class="tab ...

What kind of GWT component features both a Button and text?

I am looking to develop a customized GWT widget that consists of a rectangular div element resembling a button, accompanied by text positioned adjacent to it. My goal is to enable the selection of this widget so that clicking on either the div/button or th ...

React Native formInput Component with Underline Decoration

Utilizing the FormInput element in React Native Elements, I have observed a line underneath each FormInput component. Interestingly, one line appears fainter than the other. https://i.sstatic.net/ZD8CI.png This is how the form looks: <View style={sty ...

Top method for utilizing jQuery to locate, sift through, and implement CSS classes

Let's consider the following scenario: <span class="foo">7</span> <span class="foo">2</span> <span class="foo">9</span> We want to assign a CSS class of 'highest' to 'span.foo' with value great ...

Troubles with CSS in Wordpress

Hey there! I'm currently working on some wordpress tasks and running into an issue with the code. Everything looks good in the first two sections, but the third section is displaying at the top. Please refer to the attached image for a visual of the p ...

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

Insert the META tag data specific to Facebook Instant Articles directly within the JavaScript code

My website is running on a custom-built CMS provided by a company, and it seems like a modified version of WordPress. They are unwilling to include a basic meta tag in our HTML code. I am looking for guidance on how I can incorporate Facebook's Insta ...

Even after reaching the bottom of the page, the div for overlay projects continues to scroll

*{ margin: 0; padding: 0; } body{ font-family: helvetica , sans-serif; background-color: #1E1E20; } .parallax-container { /* The image used */ background-image: url("https://i.sstatic.net/BlF.jpg"); animation-name: pixels; animation-durat ...

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout. Here is an illustration: https://i.sst ...

Make sure that your inline-block elements are aligned with both the left and right edges of their

Explaining what I'm attempting can be a bit tricky, but I'll do my best. I have X number of categories that I need to organize. Each category needs to be enclosed in a box with a grey border. I want the category boxes to be displayed "inline-bl ...

Dynamic Menu Navigation (No Bootstrap Required)

My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear u ...