Reply To: TOC Missing in Firefox

[Derek Read]

The issue with the navigation pane not appearing has to do with an issue in IE in how it deals with CSS block sizing, which is the original reason for the existence of some CSS that was included as a workaround for that browser.

This IE-specific CSS is probably triggering the issue you are seeing, seemingly randomly for some people in FF (it affects some versions and even then does not always seem to occur in my testing). When the unwanted behavior does occur in FF the navigation pane is being reduced in size to the point where it becomes basically invisible (or in other words it does not grow to fit the content it contains). The navigation pane is being sized to “height:1%”, as listed below, rather than “1% but if you have more content in there then expand to let it fit (which is what other browsers do).

This can be addressed by altering this file:
demowebhelpcustomizationcommonxmwebhelpwebhelp.css

Change this (~ line 106):

#whTools {
                margin: 0 5px 0 5px;
                padding: 0;
                overflow-y: auto;
                height: 1%;
                display: inline;
}

To this:

#whTools {
                margin: 0 5px 0 5px;
                padding: 0;
                overflow-y: auto;
                display: inline;
}

And add this:

/* IE 6 fix for correct height rendering of ToC, Index and Search */
* html #whTools {
                height: 1%;
}

When you generate output to WebHelp the next time check to see that the changes in that CSS file were copied over to the version in your output folder.

I believe we'll be including this particular fix in our next release. It would be nice if all browsers supported the CSS standards the same way but unfortunately we'll probably be dealing with these types of issues for a long time until support for the standards become close enough in all browsers.

Now that you know where the CSS files for WebHelp are kept you should be able to make any other browser-specific changes as needed, say for example when people start moving to IE9, etc… (touch wood that won't introduce too many oddities).

Reply