Strange behavior of HTML block (SOLVED)

Using Ghost
1

I’m probably missing something obvious here, but I’ve messed with this for a while and can’t figure it out. It appears to be something with the HTML card CSS, but I can’t figure it out.

Here’s the HTML code:

<h3 style="border-top: 3px navy; border-style: solid none none none; padding: 3px 0;">Fair Maps Forum – Lexington</h3>
<div style="font-family: Arial; font-size: 14px;"><b><i>Thursday, Oct. 21 @ 7:00-8:30 EDT ● VIRTUAL</i></b></div>
The League of Women Voters of Kentucky is hosting a series of forums and online webinars to share draft legislative and Congressional district maps and solicit feedback from the public. These events are free and open to the public. <a href="https://www.lwvky.org/fair-maps-forums">Registration is required</a>.<br />
The local partner for this forum is the League of Women Voters of Lexington.<br />
<i>More info: https://www.lwvky.org</i>

What I wind up with is the URL for registration on its own line, and the “local partner” graf on its own line and centered.

I have no idea why a URL should wind up on its own line, and I can’t figure out why the other line is centered.

BTW, I’ve tried it as you see it, with DIVs and with Ps.

Thoughts?

2

For starters, the The League... content on down isn’t in any tag of its own. You’ve put the title in an <h3> tag, the date in a <div> tag, and then the rest in nothing. HTML cards don’t inherently supply a default tag for their content. Try wrapping everything else in a <p> and probably go from there.

3

Thanks – was unaware that the HTML card didn’t have a default tag or CSS. (I thought it did because I’ve noticed that the font in the HTML card is different than the standard text font.) I put the rest of it in a

tag and it worked, other than some vertical spacing I don’t like. Thanks for the response.