CODEWITHSUNDEEP
htmlcssmagentomagento-1.9
Frank G.
Frank G.

Reputation: 1579

UL List is Indenting the first list item

I am working on a Magento 1.9.x website and the products description I have bulleted list but for some very odd reason the first bullet is indent one extra then the rest of the list.

Here is the code 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:

http://www.erglighting.com/index.php/retrofit-kits.html?mode=list

Notice this is happening to all the products in the list. Can anyone please tell what would cause this problem and what I can do to fix it please? Thanks!

I found this article but wasn't sure if this would fix the issue or if this would work on 1.9:

http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/css/unordered_list_work_correctly

I also found this to regarding this issue but it seems that it is for 1.4 version:

http://www.magentocommerce.com/boards/viewthread/45667/

Upvotes: 1

Views: 743

Answers (1)

T J
T J

Reputation: 43166

The first list item is floating around the <p> above it. Either remove the float from <p> or clear it on the <li>…

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

or 

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

Upvotes: 3

Related Questions