Navigation buttons are always left-aligned in Firefox

The problem you are seeing has to do with the differences in support for certain CSS properties among the two browsers. To align the nav buttons, we build a table inside of a <div> element, and we assign the 'text-align' property of that div according to your settings in the Style Designer for the navigation alignment.

As it turns out, FireFox doesn't really like the 'text-align' attribute for anything but text. It's similar to the problem of aligning images in FireFox.

That said, I think I have a solution for you. It involves an override to a couple of files, located by default in the ePublisher Pro installation directory, here: Formats/Dynamic HTML/Pages/Page.asp Formats/Dynamic HTML/Transforms/pages.xsl

You'll want to make a copy of each of those files, and paste them into a corresponding override directory in your project folder. For more information on performing overrides, please see this TechNote article: http://webworks.com/Technical_Assistance/Tech_Notes/Common/EX_ePub_Project_Format_Overrides.shtml

So, once the files have been copied correctly, open Page.asp in a text editor. Locate these lines:

<div wwpage:condition="navigation-top" style="text-align: right;" wwpage:attribute-style="navigation-top-style">

• <table cellspacing="0" summary="">

Change them to this:

<div>

• <table wwpage:condition="navigation-top" align="left" wwpage:attribute-align="navigation-top-style" cellspacing="0" summary="">

If appropriate, repeat the change for the "bottom" navigation. Save and close Page.asp.

Next, open pages.xsl in a text- or XML-editing application. Search for this line: <wwpage:Replacement name="navigation-top-style">

Within that section, replace this:

<xsl:when test="string-length($VarAlignmentProperty) &gt; 0">
<xsl:value-of select="concat('text-align: ', $VarAlignmentProperty, ';')" />
</xsl:when>

<xsl:otherwise>
<xsl:value-of select="'text-align: left;'" />
</xsl:otherwise>

With this:

<xsl:when test="string-length($VarAlignmentProperty) &gt; 0">
<xsl:value-of select="$VarAlignmentProperty" />
</xsl:when>

<xsl:otherwise>
<xsl:value-of select="'left'" />
</xsl:otherwise>

Repeat for the bottom style as well, if necessary. Then, save and close pages.xsl, and regenerate your output to apply the changes.

That should result in an "align" attribute for the table, rather than a "text-align" attribute for the container div. If that doesn't work for you, or if you have any other questions, please submit a support case describing the issue.

CategorySolutionsOutputDhtml