Small R8 bug (enhancement?) with Rendering HTML

A couple of disclaimers… 1) We’re in the middle of upgrading to R8. Some of our mail servers have been upgraded but none of our production application servers have the new version yet. 2) This is an old (2001) application that was written for the web. I had no part of the initial development.

I discovered a small bug in the rendering of HTML in R8. It was discovered when a user was opening forms sent to a shared mailbox on an R8 server.

The Problem
Lotus Notes R8 was overlapping fields when rendering a table in the browser.

Here is what the user saw on an R8 server:

Here is what it looks like in R6:

The Cause
Spanned table cells/rows. In R8 (or possibly R7) Lotus decided it would help us out by rendering empty table rows (TR tags) with a style of “display:none.” Unfortunately, this affects rows that are being used by the ROWSPAN tag.

Here are the merged cells in the Notes Designer:

Here are the split cells:

In the browser (both versions) Notes tries to render the tables with a series of COLSPAN and ROWSPAN tags to render the table exactly the way it is displayed in the designer.

Here is the HTML from the R6 version:

<tr valign="top"><td width="50%" rowspan="4" colspan="2">2.<font color="#FF0000"> Company #: (3 digits)</font>  <font color="#0000ff">
<input name="CompanyNumber" value="" size=5></font></td><td width="50%" rowspan="4" colspan="2"><font color="#FF0000">Cost Center #: (7 digits)</font><font color="#0000ff">
<input name="CenterNumber" value="" size=10></font></td></tr>

<tr></tr>

<tr></tr>

<tr></tr>

<tr valign="top"><td width="25%"><img src="/icons/ecblank.gif" border="0" height="1" width="1" alt=""></td><td width="75%" colspan="3"><div align="right"><font color="#FF0000">Phone Number:</font>(<font color="#0000ff">
<input name="PhoneArea" value="" size=3 maxlength=3></font> ) <font color="#0000ff">
<input name="PhonePrefix" value="" size=3 maxlength=3></font> -<font color="#0000ff">
<input name="PhoneSuffix" value="" size=4 maxlength=4></font></div></td></tr>

<tr valign="top"><td width="25%"><img src="/icons/ecblank.gif" border="0" height="1" width="1" alt=""></td><td width="75%" colspan="3"><div align="right"><font color="#FF0000">Fax Number:</font>(<font color="#0000ff">
<input name="FaxArea" value="" size=3 maxlength=3></font> ) <font color="#0000ff">
<input name="FaxPrefix" value="" size=3 maxlength=3></font> -<font color="#0000ff">
<input name="FaxSuffix" value="" size=4 maxlength=4></font></div></td></tr>

Here is the HTML from the R8 version:

<tr valign="top"><td width="50%" rowspan="4" colspan="2">2.<font color="#FF0000"> Company #: (3 digits)</font>  <font color="#0000ff">
<input name="CompanyNumber" value="" size=5></font></td><td width="50%" rowspan="4" colspan="2"><font color="#FF0000">Cost Center #: (7 digits)</font><font color="#0000ff">
<input name="CenterNumber" value="" size=10></font></td></tr>

<tr style="display: none"></tr>

<tr style="display: none"></tr>

<tr style="display: none"></tr>

<tr valign="top"><td width="25%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td><td width="75%" colspan="3"><div align="right"><font color="#FF0000">Phone Number:</font>(<font color="#0000ff">
<input name="PhoneArea" value="" size=3 maxlength=3></font> ) <font color="#0000ff">
<input name="PhonePrefix" value="" size=3 maxlength=3></font> -<font color="#0000ff">
<input name="PhoneSuffix" value="" size=4 maxlength=4></font></div></td></tr>

<tr valign="top"><td width="25%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td><td width="75%" colspan="3"><div align="right"><font color="#FF0000">Fax Number:</font>(<font color="#0000ff">
<input name="FaxArea" value="" size=3 maxlength=3></font> ) <font color="#0000ff">
<input name="FaxPrefix" value="" size=3 maxlength=3></font> -<font color="#0000ff">
<input name="FaxSuffix" value="" size=4 maxlength=4></font></div></td></tr>

Notice the <tr style="display: none"></tr> tags? I am no HTML expert but it seems to cause issues with the ROWSPAN for cost center.

The Solution
We’re screwed. Seriously. Only testing will discover these strange renderings. I fixed the problem above by deleting the three unnecessarily merged rows. Hopefully, this was a freak occurance but be aware of how R8 is rendering your HTML.

20 June 2008 | general, javascript, lotus, web design | Comments