Hi Dave,
The HTML5 stylesheets make use of almost all the stylesheet params that are
defined for the stock html outputs, in order to support all of the stock
features and options. In this case, there is a param named
'make.graphic.viewport', which is set to 1 by default. To make a viewport, the
stylesheet uses a table. Set that param to zero to turn off the table.
The strange thing is that when the table is included, the style tag on the
surrounding div element should still center it:
<div style="text-align: center; " class="mediaobject">
<table style="border: 0; border-spacing: 0; padding: 0; width: 300; ">
<tr>
<td style="text-align: center; ">
<img style="text-align: middle; width: 200; " src="images/note.png"/>
</td>
</tr>
</table>
If I hardcode the center property with an align attribute <div align="center">
instead of a CSS style, then the table is centered. That doesn't seem right to
me.
Bob Stayton
Sagehill Enterprises
[email protected]
----- Original Message -----
From: Xmplar
To: [email protected]
Sent: Saturday, April 07, 2012 12:14 AM
Subject: [docbook-apps] Setting alignment of mediaobject in html5
I have a logo that I want to centre on a web page, which is located in a book
titlepage. When using the HTML5 stylesheets, the logo is not centred - it is
positioned at the left and I can't find the coding responsible for centring it.
I've noticed that now the HTML5 stylesheets generate a table around the
mediaobject, which has the same width as the mediaobject. The previous XHTML1-1
stylesheets didn't generate a table around the mediaobject, which made it easy
to position the logo using CSS.
Here is the XHTML1-1 output:
<div class="mediaobject" style="text-align: center"><img
src="images/redlettucelogo.gif" style="text-align: middle" width="300" alt="alt
text for publisher's logo"/></div>
And the HTML5 output:
<div style="text-align: center; " class="mediaobject"><table style="border:
0; border-spacing: 0; padding: 0; width: 300; "><tr><td style="text-align:
center; "><img style="text-align: middle; width: 300; "
src="images/redlettucelogo.gif" alt="alt text for publisher's
logo"/></td></tr></table></div>
The <table> does not have a style attribute for "text-align=center" and is
getting its width from the enclosed mediaobject. Why is a table now generated
(is this mandatory for HTML5?), and in what template is that generated?
--
Dave Gardiner
