Using sqwebmail-3.3.1, I discovered some problems with the webmail rendering
in Internet Explorer 5.0 for Macintosh. There were no problems with other
browsers that I know of, but a lot of people I know are using this browser.
I made some experimental changes (more detail below) to the sqwebmail html
templates which appear to have fixed the problem, without causing any
problems in other browsers that I have tested.
The problem seen in IE 5.0 is that the round corner gray or light blue gifs
do not join seamlessly with the other table cells having a matching
background color.
The solution requires around 9 individual changes per affected html template
file. At least this is true for folders.html, the template for the
"Folders" page.
There is a curious thing which occurs in these files, and perhaps there is
some reason for it that someone can fill me in on. In quite a few places
there are some non-printing characters between a <td> and the corresponding
</td>. These characters trigger about half of the problems I was seeing in
IE with the alignment of the round corners. The characters appear in vi as
"\xa0" (quotes mine) a display of 4 characters used to indicate the single
character. I take it this is a character with hexadecimal value a0, which
would be like a space, but with the high bit set. Apparently the presence
of these characters causes the cell height of the middle-top and
middle-bottom table cells to take on the height of the font currently in
effect, which in this case turns out to be taller than the round-corner
gifs.
Removing these characters eliminates the vertical aspect of the round-corner
alignment problem. This takes care of all the problems in the upper gray
table area which appears on most pages.
The lower light blue table area also has a horizontal problem which is
apparently caused by IE getting confused about the colspan="3" which is used
in the middle row of the bottom table. It is easy enough to work around
this problem by eliminating the colspan (or changing it to 1) and adding two
new empty cells for the narrow columns to the left and right of the
previouly colspan 3 cell. This change eliminates the horizontal aspect of
the round-corner alignment that appears in the light blue area.
The first change of eliminating the extra characters between <td> and </td>
seems highly advisable in any case, from what I can tell, but please inform
me if you know more. For example O'Reilly's Web Design in a Nutshell in
Chapter 10, page 188 has this to say:
Returns and spaces with <td>s
The problem most often lites within the cell (<td>) tag. Some
browsers will render any extra space within a <td> tag, such as
a character space or a line return, as white space in the table.
The chracter in question actually appears to behave as a space on the Mac.
I did not check what kind of space it is.
The second change, involving eliminating the colspan, also does not have any
adverse consequences that I can see. It is slightly less efficient in use
of horizontal space, this does not appear to be a problem. At least in most
cases the contents of the blue area do not require up a lot of horizontal
space. The change has the result of increasing the margin around the
content. To me this change is actually an improvement even in browsers that
do not have the alignment problem.
There are other places where the "\xa0" characters appear but cause no
problem.
As an example, here is the output of diff for the changes I made. I might
have eliminated some <td> spaces that were not actually causing a problem,
but I think that at most 2 of the changes might be extraneous. Note that
the "\xa0" characters appear (at least to me) as spaces here:
47c47
< <td bgcolor="#cccccc">�</td>
---
> <td bgcolor="#cccccc"></td>
53c53
< <td>�</td>
---
> <td></td>
65c65
< <td>�</td>
---
> <td></td>
70c70
< <td bgcolor="#cccccc">�</td>
---
> <td bgcolor="#cccccc"></td>
144c144
< <td bgcolor="#99ccff" valign="middle" width="100%">�</td>
---
> <td bgcolor="#99ccff" valign="middle" width="100%"></td>
150c150,151
< <td bgcolor="#99ccff" colspan="3" valign="middle">
---
> <td bgcolor="#99ccff"></td>
> <td bgcolor="#99ccff" colspan="1" valign="middle">
248a250
> <td bgcolor="#99ccff"></td>
253c255
< <td bgcolor="#99ccff" valign="middle">�</td>
---
> <td bgcolor="#99ccff" valign="middle"></td>
I hope this information is of some use. If these changes are good idea, it
would be nice if they could make it into a future version of sqwebmail. It
did not take me very long to make these changes in my template files, maybe
an hour. The patterns are almost identical everywhere they occur: the
space between <td> and </td> and the colspan="3".
Regards,
Kurt Bigler
