HTML content block not working for lists

DelightfulLight · December 3, 2013

my smugmug site : delightfullight.com

using: firefox on windows 7

i've placed an html content block on my all galleries customization (unpublished) page and the <ul></ul> and <li></li> tags do not produce any bullets or formatting. i've triple checked the open and closing tags. i've streamlined the code as best i can to no avail. furthermore, the same tags do not work in any other location on my site.

any ideas?

snakeey11 · December 4, 2013

DelightfulLight wrote: »

my smugmug site : delightfullight.com

using: firefox on windows 7

i've placed an html content block on my all galleries customization (unpublished) page and the <ul></ul> and <li></li> tags do not produce any bullets or formatting. i've triple checked the open and closing tags. i've streamlined the code as best i can to no avail. furthermore, the same tags do not work in any other location on my site.

any ideas?

Try adding the following in the CSS tab of your content block (which will override the default style that is causing the bullets to not show up):

ul {
  list-style: inside;
  /* any other desired rules... */
}

-Mike

ChancyRat · December 4, 2013

Delightful, I had the same experience you did and it was very disconcerting. Lists don't work without CSS. I'm not good with CSS. Someone on this forum coded my list for me (and more), and I've been using it plus some additions, for lots of lists since. I'm happy to share what I have.

I don't use all of these list variations in every list but I've been putting the total thing in all CSS blocks for any list, in case I want to change the list type.

There are other aspects of lists where the html breaks in Smugmug. For example if you have sub-lists, putting the red </li> where I did, in the example below, breaks the code, even though in some programs like Dreamweaver or on the W3S site, those systems 'manage' it.

If your code continues to break, I suggest posting the questions here, as some of us do need our list coding skills drastically upgraded.

ul.a {
  list-style-type: circle;
  list-style-position: outside;
  padding-left: 40px;
}

ul.b {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 40px;
}

ul.c {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 40px;
}

ol.f {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 40px;
}

ol.n {
  list-style-type: lower-alpha;
  list-style-position: outside;
  padding-left: 40px;
}

ol.r {
  list-style-type: upper-alpha;
  list-style-position: outside;
  padding-left: 40px;
}

ol.u {
  list-style-type: none;
  list-style-position: outside;
  padding-left: 40px;
}

ol.v {
  list-style-type: inherit;
  list-style-position: outside;
  padding-left: 40px;
}

li {
  margin-left: 0;
  margin-right: 10%;
  margin-top: .5em;
  margin-bottom: .5em;
  text-indent: 0em;
}

<ol class="f">
  <li><b>Lah lah</b>[B][COLOR=Red]</li>[/COLOR][/B]
    <ol class="n">
      <li>blah</li>
      <li>blah.</li>
      <li>blah.</li>
  </ol>
</li>
  <li><b>Lah lah </b>
    <ol class="n">
      <li>blah</li>
      <li>blah <i>blah</i> blah</li>
      <li>blahblahblah </li>
    </ol>
 </li>
  <li><b>Lah lah</b>
    <ol class="n">
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
  </ol> 
   </li>
  <li><b>Lah lah Lah lah Lah lah  </b>
    <ol class="n">
      <li>blah</li>
      <li>blah</li>
      <li>blahblah</li>
  </ol>
  </li>
</ol>

DelightfulLight · December 4, 2013

Many Thank uuuuuuuuuuuuuu'z
My deepest gratitude to Snakeey11 and ChancyRat for your help. Your combined efforts were just what I needed.

jrwills · March 22, 2016

Thanks
So here we are three years later and it still helps. Thanks.

HTML content block not working for lists

Comments