Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Why does my HTML <ul> and <li> formatting get lost in this .phtml file? 
 
wsj3
Guru
 
Avatar
Total Posts:  521
Joined:  2008-07-13
Portland, OR
 

I have the following html syntax in my .phtml file, but the formatting is completely lost. Any insight into how to correc this would be great.

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to so we can send you a copy immediately.
*
* @category design_default
* @package Mage
* @copyright Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
*/
?>
<img src="http://www.growmake.com/skin/frontend/default/summershine/images/media/sustainlearn.jpg"></a><p>
<UL><li>Lifestyle</li><li>Personal Growth</li><li>Eating</li><li>Playing</li><li>Giving</li></UL>
<img src="http://www.growmake.com/skin/frontend/default/summershine/images/media/sustainresources.jpg"></a><p>
<UL><li>Growmake Blog</li><li>Sustainability News</li><li>Growmake Community</li><li>RSS Feeds</li><li>What’s New</li></UL>
<img src="http://www.growmake.com/skin/frontend/default/summershine/images/media/sustainchoices.jpg"></a><p>
<UL><li>10 Simple, practical lifestyle changes</li> <li>How to start billing your utility</li><li>Get off the grid for less than $3000</li><li>How your carbon footprint compares</li></UL>

 
Magento Community Magento Community
Magento Community
Magento Community
 
CreedFeed
Member
 
Total Posts:  74
Joined:  2007-08-31
Milwaukee, WI
 

Try adding class="list" to your <ul> tag. It should look like this:

<ul class="list">

The default stylesheet of Magento’s template removes all formatting from base <ul> and <li> tags. The class “list” applies the standard style back to the <ul> tag.

 
Magento Community Magento Community
Magento Community
Magento Community
 
wsj3
Guru
 
Avatar
Total Posts:  521
Joined:  2008-07-13
Portland, OR
 

I just tried adding class="list" to the <UL> but it’s not different.

It now is <UL class="list"> <li></li> </UL>

It still has the same result. Did I miss something?

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

Hi

I copied your code into a new htm file and looks ok… what you are looking for? font style?

code is good, let me know what your are looking for wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
wsj3
Guru
 
Avatar
Total Posts:  521
Joined:  2008-07-13
Portland, OR
 

Hi

Not looking for font style, but formatting. My experience is that when you use <ul> and <li> the <li> are indented and they have a bullet for each

<UL>
<li> item 1
<li> item 2
<li> item 3
</UL>

In my left column, there is not formatting.

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

Oh ok

this is because tags UL and li exist in css files, and this means that they are formatted in a certain way.

You can create a new class for your own list!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Reino
Sr. Member
 
Avatar
Total Posts:  78
Joined:  2008-06-22
Utrecht, The Netherlands
 

Just give the UL a new class name
<ul class="mynewclass">

Define it in your template (boxes.css) and add the styles you want!
Maybe get the developer toolbar (https://addons.mozilla.org/nl/firefox/addon/60) to see wich styles are allready attachted to the UL so you can overwrite these. Good luck!
Or give an exemple (url) so i can take a look.

 
Magento Community Magento Community
Magento Community
Magento Community
 
wsj3
Guru
 
Avatar
Total Posts:  521
Joined:  2008-07-13
Portland, OR
 

Thank you everyone. Now I understand…

 
Magento Community Magento Community
Magento Community
Magento Community
 
maijar
Member
 
Total Posts:  49
Joined:  2008-06-15
 

<ul class="disc"> should work out-of-the-box. It makes indentations and bullets.

 
Magento Community Magento Community
Magento Community
Magento Community
 
turbo1
Sr. Member
 
Avatar
Total Posts:  296
Joined:  2008-08-19
Los Angeles, CA
 

Some of your issue may be the “Summershine” template. I fell victim to that too.  Buggy, author won’t fix, waste of $150. Stay away!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top