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
Hover images hidden by header
-
- Sr. Propeller Head
- Posts: 308
- Joined: Tue Jun 18, 2013 3:00 am
- Location: Eastern Seaboard, Thailand
- Contact:
Re: Hover images hidden by header
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:
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:
Just for the record, apropos of nothing, my experience with MadCap Support over several issues has been outstanding - thanks guys
This was my explanation to MadCap Support:
Here are the bug numbers. They are not yet solved, I hope they will be fixed in the next release: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.
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:
I hope this works for you.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.
Just for the record, apropos of nothing, my experience with MadCap Support over several issues has been outstanding - thanks guys
Tom
Flare 2022, Capture 7
Flare 2022, Capture 7