After our post about the inability to print pages created with iWeb, I decided to take a crack at the problem.

The first thing I did was to determine the exact cause of the problem. It turns out that the body_content <div> unnecessarily has the overflow property set to hidden. Since the <div> is relatively positioned it overflows the first page when printing, and therefore the overflow is hidden. By setting overflow: visible the problem would be fixed.

Unfortunately, iWeb writes this property as an inline style directly on the <div> itself, so there’s no way to override it. Even !important declarations with high selector specificity in external stylesheets don’t take precedence over inline styles. (This is unfortunate, in general.)

It was at this point we received a very friendly email from Mike Lee. He helpfully showed us that the printing problem doesn’t occur in Safari or when sending the page via Mail. This does make it clear that the iWeb developers were writing iWeb primarily for Safari. Not everyone is using Safari, though (we had been using Camino and Firefox). And while the Mail workaround let’s us print the page, it’s a big hack.

Mike’s suggestion was to write an XSLT stylesheet that would transform iWeb’s misbehaving inline CSS into something more palatable. And this is what I came up with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <!– The identity template. –>
  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()" />
    </xsl:copy>
  </xsl:template>
  <!– Add an ‘overflow: visible’ declaration to the body_content div. –>
  <xsl:template match="*[@id=’body_content’]/@style">
     <xsl:attribute name="style">
       <xsl:value-of select="concat(., ‘ overflow: visible;’)" />
     </xsl:attribute>
  </xsl:template>
</xsl:stylesheet>

iweb_fix.xslt

4 Kilobytes

This XSLT stylesheet uses an identity template to copy all attributes and nodes, changing only the ones overridden by other templates. Here, the only thing we want to override is the style attribute on the body_content <div>. In this case, we just concatenate the required declaration to the existing value of the attribute.

Unfortunately, when trying to run Mike’s page through this transform, it turns out the XHTML that iWeb generates is invalid. One of the (numerous) problems is that the <link> tags aren’t closed in the head. This makes the XSLT engine choke. Unlike the cause of the printing problem, though, this isn’t a simple browser incompatibility between how Safari and Camino interpret the overflow property. It’s just shoddy work on the part of the iWeb team.

Mike gave another suggestion: use Tidy to clean up iWeb’s mess. Since OS X 10.4 comes preinstalled with both the GNOME xsltproc utility and tidy, all that needs to be done is

This little fix is something that maintainers of iWeb-generated pages will have to apply themselves before uploading their websites. Perhaps like so:

Follow Sakuzaku on Twitter. Click here.