Controlling Tables and Graphic Alignment
Graphic alignment is a bit of a challenge to many web developers, and specifically to ePublisher users. It seems that Internet Explorer 6 requires the "text-align" property to define the alignment of images. So, ePublisher transfers the alignment definition of an anchored frame in FrameMaker to the text-align CSS property for that image, adding it inline to the HTML tag. However, it was decreed by the powers that be that text alignment should not apply to images (I can follow their logic here). So, FireFox, Internet Explorer 7, and other browsers ignore the property.
Following the WWW Consortium's rules, ePublisher doesn't allow a user to control the text-align property for images in the Style Designer (though it still adds it to the HTML tag if it's defined to satisfy IE6 users). As per accepted standards, images should be aligned with the "auto margin" method (for example, to left align images, set the left margin to 0px and the right margin to 'auto'; to center, set both left and right to 'auto'). Conveniently enough, IE6 doesn't recognize this strategy. That puts us (and you) at a bit of an impasse.
If you just want to left-align your images, which is the default alignment if nothing else is specified I have put together an override which removes the 'text-align' property altogether. This way, all of your images will be left-aligned, unless you specify otherwise by changing the margins (which, of course, won't work in IE6; they'll remain left-aligned). It's a bit of a compromise for people who want some control.
So, perform an override on a file called content.xsl, located by default in your ePublisher Pro installation directory here: (depending on your version)
ePublisher Pro/Formats/[Format Name]/Transforms/
or
ePublisher Pro/[your version]/Formats/[Format Name]/Transforms
For details on the override procedure, please see our online technote article here: http://www.webworks.com/Technical_Assistance/Tech_Notes/Common/EX_ePub_Project_Format_Overrides.shtml
Once you have copied the file into the appropriate location in your project directory, open it with an XML- or text-editing application like NotePad. Locate both instances of the following line:
<xsl:with-param name="ParamProperties" select="$VarResolvedProperties[(@Name != 'width') and (@Name != 'height')]" />
Add to each of them so that they read:
<xsl:with-param name="ParamProperties" select="$VarResolvedProperties[(@Name != 'width') and (@Name != 'height') and (@Name != 'text-align')]" />
Then, save content.xsl and regenerate your output to apply the changes.
The same method can be used to handle horizontal alignment of other block elements, such as tables. In content.xsl, find this line within the "Table" template:
<xsl:with-param name="ParamProperties" select="$VarCSSProperties[(@Name != 'vertical-align')]" />
Modify it so that it reads:
<xsl:with-param name="ParamProperties" select="$VarCSSProperties[(@Name != 'vertical-align') and (@Name != 'text-align')]" />
Then, use the margin method of centering or otherwise aligning your tables with the Style Designer.