xls form html formatting underline and underline color

[JenMcRuer]

Hello, 

I have been searching, high and low, for a means to create an underline under a font, whereby both are different colours (and text has additional formatting).

I have found references to <u> tags, <bottom border>... but have tried it all, and am lost in trying to figure this out.

I want the text "Intorduction" to be: <div style="text-align:center; font-size:large; font-weight:bold;">

With a thick solid underline to be color:#e01a2a; (different from the text color).

Any help is much appreciated. 

 Thank you

[JohannesLindner]

<div style="text-align: center; font-size: large; font-weight: bold;">
  <span style="border-bottom: 5px solid #e01a2a;">Introduction</span>
</div>

[JenMcRuer]

Thanks Johannes.

This unfortunately doesn't do the trick.

Nothing changes in my survey form view.

Any other thoughts/ideas? 

[JohannesLindner]

Hmm, seems to be another case of ArcGIS widgets blocking certain HTML...

Other possibilities I can think of:

use a div instead of the span

<div style="text-align: center; font-size: large; font-weight: bold;">
  <div style="display: inline; border-bottom: 5px solid #e01a2a;">Introduction</div>
</div>

use the u tag (can't control thickness)

<div style="text-align: center; font-size: large; font-weight: bold;">
  <u style="text-decoration-color: #e01a2a;">Introduction</u>
</div>

underline the whole width

<div style="text-align: center; font-size: large; font-weight: bold; border-bottom: 5px solid #e01a2a;">
  Introduction
</div>

[JenMcRuer]

Thanks again, Johannes. 

Of your three options offered, only the <u> tag works, but ONLY in underlining, NOT in colour of the line. 

Do you have any last, lingering guesses on how to make this work, or perhaps there is another person versed in html and ArcGIS that can add additional cents?

Have a great day.

[JohannesLindner]

Last try, using hr, which has a color attribute. Maybe that gets through where the style color couldn't...

<div style="text-align: center; font-size: large; font-weight: bold;">
  Introduction
  <hr color="#e01a2a" width="50%" size="5">
</div>
<!-- if that doesn't work, try placing the hr outside of the div -->
<hr color="#e01a2a" size="5">

[JenMcRuer]

Thanks again, Johannes, but not go on either option, regardless of hr placement....

This is a STUMPER!?

[JohannesLindner · Accepted solution]

OK, really last idea.

<div style="text-align: center; font-size: large; font-weight: bold;">
  Introduction
</div>
<div style="background:#e01a2a; width:100%; height:5px;"></div>

Other than that, I'm out of ideas about how to do this with HTML. All of these should work and do work in a simple html file. All of them, except the hr one, also work in a WebApp info widget. But the ArcGIS widgets and HTML often don't work together, so it can get frustrating.

Really ugly ideas:

• Use "-" or "_" to make a "line" and use the text editor to make that red.
• Create an image of the line and put that underneath the heading.

[JenMcRuer]

Now THAT produced a line at least! I'll play with the thickness. 

Many thanks, again, Johannes. I hope this brings as much relief to you as it does to me! 😃

Have a great rest of your day. 

Jen

[JenMcRuer]

Just a follow up, I need up going for the "Really ugly ideas":

• Use "-" or "_" to make a "line" and use the text editor to make that red.
• Create an image of the line and put that underneath the heading.

....to make it look pleasing to the eye. What a workaround! Surprising to me, given the capabilities of ArcGIS...