Hover images hidden by header

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
mddent01
Propeller Head
Posts: 17
Joined: Tue Feb 28, 2017 10:04 am

Hover images hidden by header

Post by mddent01 »

I have a hover style on images but when they are placed near the top of the topic, the header covers the image. I have tried changing the position of the images, reduced the size (which I don't really want to do ) and changed the z-index property but to no avail. Does anyone know which CSS property I should use to move the hovered image to display further down the page so it isn't hidden by the header?

Thanks in advance
atomdocs
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: Hover images hidden by header

Post by atomdocs »

I assume you are using topnav? I had this issue with popup images from thumbnails in topnav. It is a known bug. There is an associated issue with hyperlinks to content near the top of the target page.

This was my explanation to MadCap Support:
When Fixed Header is set to All, pop-up images near the top of the screen pop up underneath (partially hidden by) the header. Links to bookmarks work as expected. When Fixed Header is set to Web, pop-up images display over all elements (as expected), but links to bookmarks display the target bookmark content underneath (partially hidden by) the header.
Here are the bug numbers. They are not yet solved, I hope they will be fixed in the next release:

141786: Fixed header overlaps popup thumbnail images in HTML5 side navigation output
141799: Bookmark link target loads as scrolled behind header in HTML5 side navigation output when Fixed Header is set to "Web"

MadCap Support provided some workarounds:
Open the master stylesheet via right-click > Open with > Internal Text Editor.
Scroll near the bottom of the default medium styles
Depending on the fixed header option that is set in the skin, paste one of these rule-sets in:

/*Sets the z-index of the image popup container to above fixed header*/

.MCPopupContainer
{
z-index: 1000;
}


/*Workaround for the issue where bookmark link targets scroll behind web fixed header*/

h1, h2, h3, h4
{
padding-top: 5em;
margin-top: -5em;
}

As you may already be aware, we will only require the first rule-set if Fixed Header: All is set in the skin, and only the second if Fixed Header: Web is set in the skin.
I hope this works for you.

Just for the record, apropos of nothing, my experience with MadCap Support over several issues has been outstanding - thanks guys :D
Tom
Flare 2022, Capture 7
Image
Post Reply