Hi Tek,
I've gone through the basic changes you need to make below. However, I have completely deleted your complex block of table and div code in your Body section because integrating that would have been too complex for a post like this. You must start with this new version and integrate any additional elements you need in your Body section yourself. Do it in small, slow steps so that you can see the results of each step.
1: Remove all the styles code for the old header between
Code: Select all
<IF_CHM><!-- NS header only works in HTML HELP-->
and
Code: Select all
<script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>
</IF_CHM>
Code: Select all
<!-- non-scrolling headers for CHM and browser-based help-->
<style type="text/css" media="screen">
<!--
body {
margin:0;
padding:0;
overflow: auto;
background: <%TOPIC_TEXT_BGCOLOR%>;
}
#idheader {
width:100%;
height:auto;
padding: 0;
margin: 0;
background: <%TOPIC_HEADER_BGCOLOR%>;
}
/* Set the padding in the OUTER div for MSIE and CHM to prevent the
width bug and the horizontal scrollbar bug from activating. */
#idcontent {
width: 100%;
padding: 0px !important;
padding: 10px 15px 5px 10px;
}
/* Set the padding in the INNER div for all other browsers. */
#innerdiv {
padding: 10px 5px 5px 10px !important;
padding: 0px;
}
/* These styles are for the header, the print link
and the navigation links. Change .topichead padding
to 5px 5px 0px 5px if you use the Print Topic link. */
.topichead {
padding: 5px;
}
.navlinks {
font-size: 10pt;
}
.navlinks a {
text-decoration: none;
color: blue;
}
.navlinks a:visited {
text-decoration: none;
color: blue;
}
.navlinks a:hover {
text-decoration: underline;
color: blue;
}
/* These styles are dynamically assigned with Javascript.
Since the media type is "screen", they do not apply for print */
html.nonscroll {
overflow:hidden;
}
body.nonscroll {
overflow:hidden;
height:100%;
}
div.nonscroll {
overflow:auto;
}
-->
</style>
<IFNOT_EBOOK><style TYPE="text/css" media="print">
<!--
/* Hide navigation links and add space between header and
text in the printed version. DON'T change this instance for
adding the Print Topic link, you need the instance further up! */
#idnav { display:none; }
.topichead { padding: 5px 5px 20px 5px; }
-->
</style></IFNOT_EBOOK>
<script type="text/javascript">
<!--
function doResize() {
var clheight;
if (self.innerHeight) // all except Explorer
{ clheight = self.innerHeight; }
else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
{ clheight = document.documentElement.clientHeight; }
else if (document.body) // other Explorers
{ clheight = document.body.clientHeight; }
document.getElementById('idcontent').style.height = clheight - document.getElementById('idheader').clientHeight +'px';
}
function nsrInit() {
contentbody = document.getElementById('idcontent');
if (contentbody) {
contentbody.className = 'nonscroll';
document.getElementsByTagName('body')[0].className = 'nonscroll';
document.getElementsByTagName('html')[0].className = 'nonscroll';
window.onresize = doResize;
doResize();
}
}
-->
</script>
Code: Select all
<IF_CHM><body scroll="no" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_CHM><IF_HTML><body onload="remove_framespacing();" style="margin: 0px 0px 0px 0px; background: <%TOPIC_TEXT_BGCOLOR%>;"></IF_HTML>
<IF_TOPIC_HEADER>
<IF_CHM><div id="nsr"></IF_CHM>
and replace it with this:
Code: Select all
<body>
<IF_TOPIC_HEADER><div id="idheader">
with this:
Code: Select all
<!-- To add a Print Topic link uncomment this section and change the padding value of
the .topichead style at the top of the template to "padding: 5px 5px 0px 5px;"
<IFNOT_EBOOK>
<tr id="idnav">
<td colspan="2" style="padding: 0px 5px 5px 5px">
<span class="navlinks"><a href="javascript:print()">Print this Topic</a></span>
</td>
</tr>
</IFNOT_EBOOK>
Uncomment this section to add a Print Topic link -->
</table>
</div></IF_TOPIC_HEADER>
(The closing </IF_TOPIC_HEADER> tag was missing in your template. This will cause serious problems in topics without headers, if you have any!)
5: Delete everything in your <!-- Body --!> section up to the <!-- Footer --> comment and replace it with:
Code: Select all
<div id="idcontent"><div id="innerdiv">
<%TOPIC_TEXT%>
I realise that you want to have the complex block of table and div code in your body section for your own reasons but working it into the template would be too complex for this post. You must start with this new version and add your own code to it as required. Do it in small steps so that you can see which changes have unwanted results!
Important: Note that your footer links will have white text on white background until you do this, because deleting the old code also deletes your table background colors etc.
6: Go down to the bottom of your <!-- Footer --> section and insert the following code between your last closing </div> tag and the closing </body> tag:
Code: Select all
</div></div>
<IF_TOPIC_HEADER><script type="text/javascript">
<!--
var lastSlashPos = document.URL.lastIndexOf("/") >
document.URL.lastIndexOf("\\") ? document.URL.lastIndexOf("/") :
document.URL.lastIndexOf("\\");
if( document.URL.substring( lastSlashPos + 1, lastSlashPos + 4
).toLowerCase() != "~hh" )
{
nsrInit();
}
-->
</script></IF_TOPIC_HEADER>
The final result of your template with the above modifications (and with your entire Body section tables/divs removed) looks like this:
Code: Select all
<%DOCTYPE%>
<html>
<head>
<title><%TITLE%></title>
<meta name="generator" content="Help & Manual">
<meta name="keywords" content="<%TOPIC_KEYWORDS%>">
<meta http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>">
<link type="text/css" href="<%STYLESHEET%>" rel="stylesheet">
<style type="text/css">
a { color: #0000FF; text-decoration: none }
a:visited {color: #0000FF }
a:hover {color: #E4641C; text-decoration: underline }
a.weblink {color: #0000FF; text-decoration: underline }
a.weblink:visited {color: #0000FF}
a.weblink:hover {color: #E4641C }
a.popuplink {color: #FF0000; text-decoration: none}
a.popuplink:visited {color: #FF0000}
a.popuplink:hover {color: #FF0000; text-decoration: underline}
a.filelink {color: #04BC14; text-decoration: none}
a.filelink:visited {color: #04BC14}
a.filelink:hover {color: #04BC14; text-decoration: underline}
.fsmall {
font-size: 10px;
font-family: Verdana, Helvetica, sans-serif;
text-align: center;
margin: 10px 0px 0px 0px;
}
.crumbs {font-size: 8pt; margin-bottom: 3px; margin-top: 0px; color: #FFFFFF}
.crumbs a {text-decoration: underline; color: #FFFFFF}
.crumbs a:visited {text-decoration: underline; color: #FFFFFF}
.crumbs a:hover {color: #F4BC5C}
</style>
<!-- Bookmark - JavaScript -->
<IF_HTML>
<script type="text/javascript" language="JavaScript">
var urlAddress = "http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%>";
var pageName = "<%TITLE%> - <%TOPIC_TITLE%>";
function addToFavorites() {
if (window.external) {
window.external.AddFavorite(urlAddress,pageName) }
else {
alert("Sorry! Your browser doesn't support this function."); }
}
</script>
<!-- Remove frame spacing - JavaScript -->
<script type="text/javascript">
function remove_framespacing () {
var frameset = top.document.getElementsByTagName('frameset')[0];
frameset.frameSpacing = '0px';
frameset.rows = "*";
}
</script>
</IF_HTML>
<!-- Page Comments - JavaScript -->
<script language="JavaScript">
function doExpandComments(paraNum, imageNum) {
if (paraNum.style.display=="none")
{paraNum.style.display=""; imageNum.src="minus.gif"}
else
{paraNum.style.display="none"; imageNum.src="plus.gif"}
}
</script>
<!-- non-scrolling headers for CHM and browser-based help-->
<style type="text/css" media="screen">
<!--
body {
margin:0;
padding:0;
overflow: auto;
background: <%TOPIC_TEXT_BGCOLOR%>;
}
#idheader {
width:100%;
height:auto;
padding: 0;
margin: 0;
background: <%TOPIC_HEADER_BGCOLOR%>;
}
/* Set the padding in the OUTER div for MSIE and CHM to prevent the
width bug and the horizontal scrollbar bug from activating. */
#idcontent {
width: 100%;
padding: 0px !important;
padding: 10px 15px 5px 10px;
}
/* Set the padding in the INNER div for all other browsers. */
#innerdiv {
padding: 10px 5px 5px 10px !important;
padding: 0px;
}
/* These styles are for the header, the print link
and the navigation links. Change .topichead padding
to 5px 5px 0px 5px if you use the Print Topic link. */
.topichead {
padding: 5px;
}
.navlinks {
font-size: 10pt;
}
.navlinks a {
text-decoration: none;
color: blue;
}
.navlinks a:visited {
text-decoration: none;
color: blue;
}
.navlinks a:hover {
text-decoration: underline;
color: blue;
}
/* These styles are dynamically assigned with Javascript.
Since the media type is "screen", they do not apply for print */
html.nonscroll {
overflow:hidden;
}
body.nonscroll {
overflow:hidden;
height:100%;
}
div.nonscroll {
overflow:auto;
}
-->
</style>
<IFNOT_EBOOK><style TYPE="text/css" media="print">
<!--
/* Hide navigation links and add space between header and
text in the printed version. DON'T change this instance for
adding the Print Topic link, you need the instance further up! */
#idnav { display:none; }
.topichead { padding: 5px 5px 20px 5px; }
-->
</style></IFNOT_EBOOK>
<script type="text/javascript">
<!--
function doResize() {
var clheight;
if (self.innerHeight) // all except Explorer
{ clheight = self.innerHeight; }
else if (document.documentElement && document.documentElement.clientHeight) // Explorer 6 Strict Mode
{ clheight = document.documentElement.clientHeight; }
else if (document.body) // other Explorers
{ clheight = document.body.clientHeight; }
document.getElementById('idcontent').style.height = clheight - document.getElementById('idheader').clientHeight +'px';
}
function nsrInit() {
contentbody = document.getElementById('idcontent');
if (contentbody) {
contentbody.className = 'nonscroll';
document.getElementsByTagName('body')[0].className = 'nonscroll';
document.getElementsByTagName('html')[0].className = 'nonscroll';
window.onresize = doResize;
doResize();
}
}
-->
</script>
</head>
<!-- Body -->
<body>
<IF_TOPIC_HEADER><div id="idheader">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
<tr valign="bottom">
<IF_CHM><td align="left" valign="bottom" style="padding: 6px 6px 6px 10px;"></IF_CHM><IF_HTML><td align="left" valign="bottom" style="padding: 6px 6px 0px 10px;"></IF_HTML><p class="crumbs"><b>Navigation:</b>
<IFNOT_TOPIC_BREADCRUMBS>»No topics above this level«</IFNOT_TOPIC_BREADCRUMBS>
<IF_TOPIC_BREADCRUMBS><%TOPIC_BREADCRUMBS%> ></IF_TOPIC_BREADCRUMBS></p><%TOPIC_HEADER%></td>
<td align="right" valign="middle" style="padding: 0px 10px 0px 0px;">
<span style="font-size: 9pt">
<IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"
onmouseover="document.images.prev.src='btn_prev_h.gif'"
onmouseout="document.images.prev.src='btn_prev_n.gif'"
><img name=prev src="btn_prev_n.gif" border=0 alt="Previous"
></a></IF_PREVIOUS_PAGE><IFNOT_PREVIOUS_PAGE><img src="btn_prev_d.gif" border="0"
></IFNOT_PREVIOUS_PAGE><a href="<%HREF_PARENT_CHAPTER%>"
onmouseover="document.images.main.src='btn_home_h.gif'"
onmouseout="document.images.main.src='btn_home_n.gif'"
><img name=main src="btn_home_n.gif" border=0 alt="Parent Chapter"
></a><IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"
onmouseover="document.images.next.src='btn_next_h.gif'"
onmouseout="document.images.next.src='btn_next_n.gif'"
><img name=next src="btn_next_n.gif" border=0 alt="Next"
></a></IF_NEXT_PAGE><IFNOT_NEXT_PAGE><img src="btn_next_d.gif" border="0"></IFNOT_NEXT_PAGE>
</span>
</td>
</tr>
<tr>
<IF_HTML><td style="padding: 0px 0px 4px 10px; font-size: 7pt;" align="left" valign="bottom"><font color="#FFFFFF">http://<%ONLINEHELPLINK%>/index.html?<%HREF_CURRENT_PAGE%></span></td></IF_HTML>
<IF_HTML><td class="crumbs" style="padding: 0px 11px 4px 0px; font-size: 7pt; text-decoration: none;" align="right"><a href="javascript:addToFavorites()"><img src="../_common_files/favadd.gif" border="0" alt="Click here to add this page to your favorites">Add To Favorites</a></span></td></IF_HTML>
</tr>
<tr><td colspan="2" height="4" style="background: url(main_top.jpg)";></td></tr>
<!-- To add a Print Topic link uncomment this section and change the padding value of
the .topichead style at the top of the template to "padding: 5px 5px 0px 5px;"
<IFNOT_EBOOK>
<tr id="idnav">
<td colspan="2" style="padding: 0px 5px 5px 5px">
<span class="navlinks"><a href="javascript:print()">Print this Topic</a></span>
</td>
</tr>
</IFNOT_EBOOK>
Uncomment this section to add a Print Topic link -->
</table>
</div></IF_TOPIC_HEADER>
<!-- Body -->
<div id="idcontent"><div id="innerdiv">
<%TOPIC_TEXT%>
<!-- Footer -->
<div style="margin: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0px; color: <%TOPIC_HEADER_BGCOLOR%>; background: url(header_bg_blue.jpg);">
<tr>
<td align="left" style="padding: 6px 0px 6px 10px;">
<span style="font-size: 8pt">
<b>
<IF_CHM><a href="introduction.htm"></IF_CHM><IF_HTML><a href="introduction.php"></IF_HTML><font color="#FFFFFF">Home</a>
<IF_CHM>• <a href="online_help.htm"><font color="#FFFFFF">Online Help</a></IF_CHM>
</b>
</span>
</td>
<td align="right" style="padding: 6px 10px 6px 0px;">
<span style="font-size: 8pt">
<b>
<IF_PREVIOUS_PAGE><a href="<%HREF_PREVIOUS_PAGE%>"><font color="#FFFFFF">« Previous</a></IF_PREVIOUS_PAGE>
<IFNOT_PREVIOUS_PAGE><font color="#A7A7A7">« Previous</IFNOT_PREVIOUS_PAGE>
<font color="#FFFFFF">•
<a href="<%HREF_PARENT_CHAPTER%>"><font color="#FFFFFF">Parent Topic</a>
<font color="#FFFFFF">•
<IF_NEXT_PAGE><a href="<%HREF_NEXT_PAGE%>"><font color="#FFFFFF">Next »</a></IF_NEXT_PAGE>
<IFNOT_NEXT_PAGE><font color="#A7A7A7">Next »</IFNOT_NEXT_PAGE>
</b>
</span>
</td>
</tr>
<tr><td colspan="2" style="height: 4px; background: url(main_top.jpg)"></td></tr>
<tr>
<IF_HTML><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;"> <a href="<%PDFLINK%>"><img src="../_common_files/pdf2.jpg" border="0" alt="Click here to download the print version of this help file">Download Print Version</a></span></td></IF_HTML>
<IF_CHM><td align="left" style="padding: 5px 2px 12px 2px;" bgcolor="#FFFFFF"><span style="font-size: 7pt;"> </span></td></IF_CHM>
<td align="right" style="padding: 5px 10px 12px 2px;" bgcolor="#FFFFFF">
<span style="font-size: 7pt; text-decoration: none"> <%COPYRIGHT%> <a href="http://www.omt.net" target="_blank"><img src="../_common_files/omt_tiny.png" width="50" height="15" border="0" alt="Click here to jump to omt.net"></a></span>
</td>
</tr>
</table>
</div>
</div></div>
<IF_TOPIC_HEADER><script type="text/javascript">
<!--
var lastSlashPos = document.URL.lastIndexOf("/") >
document.URL.lastIndexOf("\\") ? document.URL.lastIndexOf("/") :
document.URL.lastIndexOf("\\");
if( document.URL.substring( lastSlashPos + 1, lastSlashPos + 4
).toLowerCase() != "~hh" )
{
nsrInit();
}
-->
</script></IF_TOPIC_HEADER>
</body>
</html>
