Skip to main content
K
KJoyMcK
Known Participant
March 22, 2010
Answered

WebHelp Navigation Bar in IE vs. Firefox

  • March 22, 2010
  • 1 reply
  • 2139 views

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!

This topic has been closed for replies.
Correct answer 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.


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

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
March 23, 2010

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.

K
KJoyMcKAuthor
Known Participant
March 23, 2010

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
Willam van Weelden
Inspiring
March 23, 2010

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices