VR Course Contest


Show us your best virtual reality course and win $50 gift card and a winner badge!
CHECK IT OUT

Why is it that when text has the HTML Text Type set to H1 it vertically offsets when published?

thires
thires Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 1 ☆ Roadie ☆
I have a title near the top of my page (8 pixels). It publishes and positions the text as expected. However, if the text has the HTML Text Type set to H1 it vertically offsets about 8 pixels down. The help documentation claims that setting the HTML type is for structure and will not affect the display. Well.. it does. I've inspected the element with and without the h1 tag. The only difference I can see is the that with the HTML type it has an H1 tag in the html. However, the h1 tag has no properties. Any help would be appreciated. Thanks

Answers

  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 489 eLearning ROCKSTAR Admin Team
    edited February 3, 2021
    Yes, I thought we had corrected this, what version are you using?

    Browsers have a default css style for H1 and that is what is likely causing the issue. This might help:

    Add an External HTML object at the top/root/title level so it is inherited everywhere.
    Set to type Meta and enter the following scripting:

    <style>
    .h1 {
    margin: 0px;
    padding: 0px;
    }
    </style>
  • approg
    approg Community Member Posts: 250 ♪ Opening Act ♪
    We you say "I thought we had corrected this" do you mean: the bug was identified; an engineer addressed it; QA verified the fix, and, the fix was deployed? Or do you mean someone will get around to addressing this in some future version?
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 489 eLearning ROCKSTAR Admin Team
    edited February 17, 2021
    Thanks @approg for the question. I did some research and I see we did fix this for Lectora Online and have a backlog item for it in Lectora Desktop.

    Based on the changes made for the fix please use the css below instead of my previous post.

    Note: margin-top is for Edge and IE.
    <style>
    h1, h2, h3, h4, h5, h6
    {
    	padding: 0px 0px 0px 0px;
    	font-weight:normal;
    	font-family: Arial, sans-serif;
    	font-size: 10pt;
    	margin-block-start: 0em;
    	margin-top: 0px;
    }
    </style>
    I will add this forum post to the desktop issue and ask our Product Team to review it. (LD-6641)
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!