unordered or ordered list - following a coloured title the first bullet is coloured as well?

[JenMcRuer]

Hello, 

When using Survey123 Connect to create unordered or ordered lists beneath specific titles (titles in colour, list items not), I find that the first bullet in the list is also coloured?

I'm wondering if there may be something wrong with my html code for this?  I'm open to suggestions!

Many thanks, 

Jen

Code example for screenshot below:

<div style="font-weight:bold; font-size:15px; color:#00ffff">You are invited to participate in the Stories for Stream2Sea Project because you:</div>
<ul><li><div style= "font-size:15px; color:#ffffff">Are a Canadian citizen; </li>
<li><li><div style= "font-size:15px; color:#ffffff">Are over 18 years of age;</li><li><li><div style= "font-size:15px; color:#ffffff">Are Ocean: Your body is 60% water, you live in a country with 3 ocean borders, the world's longest coastline, with the largest proportion of freshwater lakes.</ul><br></li>
<div style="font-weight:bold; color: #00ffff; font-size:15px;">What is involved</div style="font-weight:bold">
<div style="font-size:15px;"><ol><li><li><div style= "font-size:15px; color:#ffffff">Reading & consenting to this Letter; </li>
<li><li><div style= "font-size:15px; color:#ffffff">Completing the story guide to share your story on the Stream2Sea StoryMap [HYPERLINK].</li></ol><br>

[JohannesLindner]

This is how your code looks when you format it cleanly:

<div style="font-weight:bold; font-size:15px; color:#00ffff">You are invited to participate in the Stories for Stream2Sea Project because you:</div>
<ul>
  <li>
    <div style= "font-size:15px; color:#ffffff">
    Are a Canadian citizen; 
  </li>
  <li>
  <li>
    <div style= "font-size:15px; color:#ffffff">
    Are over 18 years of age;
  </li>
  <li>
  <li>
    <div style= "font-size:15px; color:#ffffff">
    Are Ocean: Your body is 60% water, you live in a country with 3 ocean borders, the world's longest coastline, with the largest proportion of freshwater lakes.
</ul>
<br></li>
<div style="font-weight:bold; color: #00ffff; font-size:15px;">
What is involved</div style="font-weight:bold">
<div style="font-size:15px;">
<ol>
  <li>
  <li>
    <div style= "font-size:15px; color:#ffffff">
    Reading & consenting to this Letter; 
  </li>
  <li>
  <li>
    <div style= "font-size:15px; color:#ffffff">
    Completing the story guide to share your story on the Stream2Sea StoryMap [HYPERLINK].
  </li>
</ol>
<br>

You're opening lots of div and li tags without closing them. Survey123 seems to do a lot of work to hide that, but this is what the result should look like (Info widget in a WebApp; you get the same result when you copy your code into a text file, save that as .html and open it with your broser):

I don't know why your first bullet point is colored, you did close those tags correctly. It could be a result of Survey123 fighting with your code.

Clean up your code and see if that works or not. From my own painful experience:

• When you open a tag, immediatly close it. Only then start to fill out its content. This way, you don't forget to close tags.
• Put general attributes (eg font size, font color) into an enclosing div, so that you don't have to specify them over and over again.
• Indenting your code can help you understand its structure and find missing closing tags.

<div style="font-size: 15px; color: white;"> <!-- General font attributes -->
  <div style="font-weight: bold; color: #00ffff"> <!-- Special font attributes for this div -->
    You are invited to participate in the Stories for Stream2Sea Project because you:
  </div>
  <ul>
    <li>Are a Canadian Citizen;</li>
    <li>Are over 18 years of age;</li>
    <li>Are Ocean: Your body is 60% water, you live in a country with 3 ocean borders, the world's longest coastline, with the largest proportion of freshwater lakes.</li>
  </ul>
  <br/>
  <div style="font-weight: bold; color: #00ffff">
    What is involved
  </div>
  <ol>
    <li>Reading & consenting to this Letter;</li>
    <li>Completing the story guide to share your story on the Stream2Sea StoryMap [HYPERLINK].</li>
  </ol>
</div>

[JenMcRuer]

Thank you Johannes, for the support, once again.

I appreciate the lesson in formatting cleanly - apologies that going through my formatting was likely arduous!

Even with the new version of the code that you kindly offered, there remain coloured bullet points (only the first one in each list). 

Is this normal in survey123 connect? 

Have a great day, 

Jen

[JohannesLindner]

apologies that going through my formatting was likely arduous!

Eh, I just ran it through an online HTML prettifier, no big problem.

Is this normal in survey123 connect? 

I haven't worked with Survey123, so I don't know if it's "normal". I certainly hope not! But ESRI blocks many HTML things in their widgets, and it seems that they block different things in different widgets. Survey123 seems to block more things than e.g. the Info widget in a WebApp, as we saw in your post about the underline.

But coloring the first bullet point is obviously wrong, and that is probably not Survey123's fault. If you want, you can post your code (either her or in a pm) and I'll take a look at it when I have time. No promises on a solution, though.

[JenMcRuer]

Good morning, Johannes, 

I received your reply and kind offer to look at my code when you have a moment via pm. If you can send me your contact to jen@colcoalition.ca, I'll send you the details.  Many thanks for your continued support. 

Kindly,