WebHelp Navigation Bar in IE vs. Firefox

[KJoyMcK]

Hi, I'm using RH8 HTML output to WebHelp and trying to customize the look to better match our product. I've been able to create buttons that look like tabs to mirror our product, but I'm having one display issue in IE vs. Firefox.

My faux-tab looking RH Skin is comprised of the following components:

• Buttons that look like tabs
• A custom nav bar with a line across the bottom the same color as the tabs, so that when a tab is selected you see the continuation all across the nav bar (50px high)
  
• A custom logo button that I've put in the left corner that also has the line across the bottom to match the nav bar (50px high)
  

In Firefox, everything looks great and all the lines of the components all match up, like this:

This line is the nav bar + logo + selected tab resting on top.

In IE, the logo gets bumped up 1 or 2 pixels so that the line looks like this:

It seems that this *should* be a simple HTML fix, but I have no idea where to go in all the RH files to fix this alignment issue. I did try aligning all the buttons to the bottom, via the Skinny on Skins advice, but that didn't help.

If I remove the line from the logo completely, I get some continuation of the nav bar just to the left of the logo, so the line stops and starts again, which looks weird.

Any ideas? I'm not sure what files to look at or what to do to make them prettily align in both browsers. If I could add some padding or do something to keep that logo from being bumped up in IE, I think that would solve my problem.

Thanks!

[Willam_van_Weelden]

Hi,

The files to check are whskin_tbars.htm and whtbar.js.

All the buttons are placed inside a table (created in whtbar.js). In Firefox, the buttons in the table are aligned a few pixels lower than in IE. It's probably a style issue. Look for the function writeStyle on line 148.

That's all I can tell you without taking a look in your output files.

Greet,

Willam

This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

[KJoyMcK]

This is definitely outside my area of expertise, I'm not sure what to do with the code. I've pasted the WriteStyle code below; there's plenty of elements of padding, but I'm not sure what is what.

I'm looking for the padding/code that bumps up the buttons a few pixels in IE vs. FF, and I'd also like to find the code that controls the padding in between buttons. I'd like to add a blank button to add space before the tabs, and the spacing is throwing the design off slightly.

The code:

function writeStyle(bMiniBar)
{
    var sStyle="";
    sStyle+="<style type='text/css'>\n";
    sStyle+="<!--\n";
    sStyle+=".clsBtnNormal {\n";
    if(!(gbNav4&&!gbNav6))
        if (bMiniBar)
            sStyle+="padding:2px;\n";
        else
            sStyle+="padding:5px;\n";
    sStyle+="cursor:hand;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsNoBNormal {\n";
    sStyle+="padding-left:2px;padding-right:2px;\n";
    sStyle+="cursor:hand;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsBtnDisable {\n";
    if(!(gbNav4&&!gbNav6))
        if (bMiniBar)
            sStyle+="padding:2px;\n";
        else
            sStyle+="padding:5px;\n";
    sStyle+="cursor:default;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsNoBDisable {\n";
    sStyle+="padding-left:2px;padding-right:2px;\n";
    sStyle+="cursor:default;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsNotBtn {\n";
    if(!(gbNav4&&!gbNav6))
        if (bMiniBar)
            sStyle+="padding:2px;\n";
        else
            sStyle+="padding:5px;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsBtnUp{\n";
    if(!(gbNav4&&!gbNav6))
        if (bMiniBar)
            sStyle+="padding:1px;\n";
        else
            sStyle+="padding:4px;\n";
    sStyle+="border-bottom:"+gsTBDarkColor+" 1px solid;\n";
    sStyle+="border-left:"+gsTBLightColor+" 1px solid;\n";
    sStyle+="border-right:"+gsTBDarkColor+" 1px solid;\n";
    sStyle+="border-top:"+gsTBLightColor+" 1px solid;\n";
    sStyle+="cursor:hand;";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsNoBUp{\n";
    sStyle+="padding-left:2px;padding-right:2px;\n";
    sStyle+="cursor:hand;";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=".clsBtnDown{\n";
    if(!(gbNav4&&!gbNav6))
        if (bMiniBar)
            sStyle+="padding:1px;\n";
        else
            sStyle+="padding:4px;\n";
    sStyle+="border-bottom:"+gsTBLightColor+" 1px solid;\n";
    sStyle+="border-left:"+gsTBDarkColor+" 1px solid;\n";
    sStyle+="border-right:"+gsTBLightColor+" 1px solid;\n";
    sStyle+="border-top:"+gsTBDarkColor+" 1px solid;\n";
    sStyle+="color:"+gsTBFontColor+";\n";
    sStyle+="cursor:hand;\n";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";}\n";

    sStyle+=".clsNoBDown{\n";
    sStyle+="padding-left:2px;padding-right:2px;\n";
    sStyle+="cursor:hand;";
    sStyle+="font-family:"+gsTBFontFamily+";\n";
    sStyle+="font-size:"+gsTBFontSize+";\n";
    sStyle+="color:"+gsTBFontColor+";}\n";

    sStyle+=getDefaultButtonFont();
    sStyle+=gsBtnStyle;
    sStyle+=".clsToolbarBackground{\n";
    sStyle+="margin:2px;}\n";
    sStyle+="-->\n";
    sStyle+=" body {\n";
    if (gsBgImage)
        sStyle+="border-top:"+gsBgColor+" 1px solid;}\n";
    else
        sStyle+="border-top:black 1px solid;}\n";
    sStyle+="-->\n";
    sStyle+="</style>\n";
    document.write(sStyle);

[Willam_van_Weelden]

Hi,

I'm familiar with the function, but I can't tell you just like that what you need to change. If you can share an example (empty project with skin), I can take a look.

Greet,

Willam

This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

[Willam_van_Weelden · Accepted solution]

For anyone interested in this thread, the problem was caused by the align of the images used for the button. Here follows a short description of the solution. Note that this solution works perfectly for this particular problem. If you have a similar problem, you cannot simply paste the amended code, but it may save you some time searching for a solution.

The standard vertical align for images in the minibar or navigation bar is 'absmiddle'. FF and IE both render it slightly different. In this case, FF 1px too low and IE 1 or 2px too high.

To solve this, you need to edit the function getImage in whtbar.js. This function is used for every image in the minibar or the navigation bar.

To solve this particular problem, I replace the code sI+=" border=0 align=\"absmiddle\">"; on line 289 with:

sI+=" border=0 ";

if(gbIE)//If the browser is IE

{

      if(sTitle=="")//If the title is empty, it is a custom button. This button is place 2px too high.

            sI+="style=\"position: relative; top: 2px;\" ";

      else//There is a title, so it's a standard button. This is 1px too high.

            sI+="style=\"position: relative; top: 1px;\" ";

}

else if(gbMozilla)//If the browser if Firefox

{

      if(sTitle!="")//The title is not empty, thus it's not a custom button. Place 1px higher

            sI+="style=\"position: relative; top: -1px;\" ";

}

Greet,

Willam

[KJoyMcK]

Note that I chose to add a blank button to my toolbar, to give the effect of more space between my logo and when my tabs start. To do this, I had to modify the spacing values that William gave me originally.

They ended up like this:

        if(gbIE)
        {
            if(sTitle=="")
                sI+="style=\"position: relative; top: 1px;\" ";
            else
                sI+="style=\"position: relative; top: 1px;\" ";   
        }
        else if(gbMozilla)
        {
            if(sTitle!="")
                sI+="style=\"position: relative; top: -1px;\" ";
                else
                    sI+="style=\"position: relative; top: -1px;\" ";

Thanks to William for his help!

[Willam_van_Weelden]

To make the script a little smaller:

if(gbIE)

sI+="style=\"position: relative; top: 1px;\" ";

else if(gbMozilla)

sI+="style=\"position: relative; top: -1px;\" ";

Greet,

Willam

This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

[KJoyMcK]

I have a little bit of an issue. I made the navigation 15px taller to help add some extra whitespace. This means my values are this:

    sI+=" border=0 ";
       
        if(gbIE)
        {
            if(sTitle=="")
                sI+="style=\"position: relative; top: -1px;\" ";
            else
                sI+="style=\"position: relative; top: 5px;\" ";   
        }
        else if(gbMozilla)
        {
            if(sTitle!="")
                sI+="style=\"position: relative; top: 5px;\" ";
                else
                    sI+="style=\"position: relative; top: -3px;\" ";
        }

This is causing the buttons in the mini-TOC to get pushed down a few pixels:

I was hoping Skinny on Skins would pinpoint where the positioning of these buttons is controlled, but I can't find it. Is there somehwere that I can specify positioning for these?

Thanks!

[Willam_van_Weelden]

Hi,

Making a good solution requires adding an extra variable to the function getImage. The quick (and a little dirty) solution goes like this:

Open whskin_mbars.htm.

Paste the following code in the bottom of the file, just above the </script> tag:

var Images = document.getElementsByTagName('img');
for(i=0; i<=Images.length; i++)
{
    Images.style.top = "0";
}

This wil reset the align of all the images in the minibar to the default top position. You can amend the value 0 to anything you want, such as "1px" or so.

This is the easy solution, because you don't have to check whether the images are in the minibar or not. You can also add it to whtbar.js, but that requires more scripting.

Greet,

Willam

[KJoyMcK]

How would I adapt the above code for Google Chrome? I'm not sure how to specify that in the code, and Google is not helping me find the answer .

Thank you!

[Willam_van_Weelden]

Hi,

This script uses the RoboHelp browser detection script (whver.js). For chrome, use if(gbChrome){ //do something for chrome }. Note that chrome also gives a positive for checking for Firefox (gbMozilla).

Greet,

Willam