Skip to main content
SHillaby
SHillaby
Inspiring
August 18, 2016
Answered

Fixed header and anchor tags

  • August 18, 2016
  • 2 replies
  • 1011 views

Caveats: I am new to this forum and have been using RH 2015 since the end of May. I'm somewhere between beginner and intermediate with CSS and HTML, and I know nothing about JQuery or javascript.

I have tweaked the Desktop Catalog with Home Page multiscreen layout so that it has a fixed header and the content scrolls up underneath the header. This works well and looks lovely until clicking a link to an anchor, such as when using the MiniTOC to navigate in a topic. The anchor loads underneath the header at the top of the browser window instead of below the header at the top of the visible space.

After investigating the problem, I had hoped that I had found a fix at Hashtag Links that Don't Headbutt the Browser Window, but it didn't work.

More research and digging into how RH configures its bookmark anchors and I discovered that the bookmarks are configured with a

     <a name="blahblah"></a>

tag for the anchors instead of a

     <h1 id="blahblah">Blah di Blah</h1>

tag.

According to W3 Schools, "The <a> name attribute is not supported in HTML5. Use the id attribute instead." This is disappointing, since the output choice is Multiscreen HTML5.

Can anyone offer a solution that will work with RH's apparently outdated <a name="MiniTOCBookMark1></a> format?

Thanks in advance!

P.S. I am posting this at the end of the day and I will not be in to work again until morning August 22, 2016, so if I do not respond to clarification questions right away, please don't think I am ignoring you.

This topic has been closed for replies.
Correct answer Amebr

I have a non-scrolling header, and I just added the following to my screen layout stylesheet (targetting IE only):

a[name]                    {

                            padding-top:130px;

}

Adjust the pixel value to suit.

I had a play on Chrome, and the following seems to make it work there:

a[name] {

padding-top:130px;

margin-top:-130px;

display:block;

}

2 replies

A
Community Expert
AmebrCommunity ExpertCorrect answer
Community Expert
August 22, 2016

I have a non-scrolling header, and I just added the following to my screen layout stylesheet (targetting IE only):

a[name]                    {

                            padding-top:130px;

}

Adjust the pixel value to suit.

I had a play on Chrome, and the following seems to make it work there:

a[name] {

padding-top:130px;

margin-top:-130px;

display:block;

}

SHillaby
SHillabyAuthor
Inspiring
August 22, 2016

Thank you, Amebr! Your simple and elegant solution did the trick.

A
Community Expert
AmebrCommunity Expert
Community Expert
August 23, 2016

It's possible there is a reason this is not suggested on css tricks, so just be aware there may be unforeseen consequences, although I haven't come across them in my limited environment yet.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 19, 2016

I'll hazard a guess here that the issue is that the Design Editor works with HTML4 and the code gets converted to HTML5 when you generate the help. That could be why your fix didn't work.

Perhaps Willam can confirm?

See Item 21 at Snippets​. It was designed for WebHelp but you could try it with HTML5. Please let us know the outcome.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices