Genii Weblog

Consistency without 3rd party products

Wed 8 Mar 2006, 08:53 AM

by Ben Langhinrichs
As I blogged about yesterday, my focus lately has been on software that would not change things, or rather that would make them look or act the same in different environments .  I also posted an example yesterday of how our software can be used to do that, but today I thought I'd give an example of how I am also working on consistency without third party software, even ours.  I again swiped copied Alan Lepofsky's cool new signature block that he likes to use on posts in the Notes forums, but this time I took a stab at making it look the same in Notes and on the web without using the Midas engine.  Actually, I did this first, but discovered after the fact that it didn't help if the signature was mailed to someone, and hence the post on MIME conversion and rendering.  Also, as I mentioned before, Alan's Lotus Notes Tips and Tricks Blog is an excellent source of tips and tricks of his own.  I highly recommend it!

So, here is a trick you can use without buying anything.  

This is Alan's signature block in Notes, so this is the look we are going for:
Signature block in Notes

This is what Alan's signature block would look like as rendered natively by Internet Explorer (or Firefox, as they look almost identical in this case):

Signature block with native rendering

So, we can do better than that.  Here we set the HTML Style properties for the whole table to 

border-collapse: collapse;border-top:solid black 2px; border-left:0px; border-right:0px; border-bottom:solid black 2px

which I have discovered through experience will emulate Notes-style borders, and which will in this case set the top and bottom borders to double width but the left and right borders of all cells to none:

Setting the table HTML Style attributes

We are getting closer, but the following two images suggest we are not close enough.  

This is from Internet Explorer using the table's HTML  Style as above , and the signature block looks better, but not the same:

Internet Explorer rendering with just Style attributes

This is from Firefox using the table's HTML style as above, and it looks quite different (and not too attractive):

Firefox rendering with just Style attributes

So, we trudge on.  Looking at the HTML source, the problem is obvious.  The table has a border="1" property set because Notes sees that the top border of the upper leftmost cell has a border, and that is what the web rendering uses.  So, how can we fool the Notes rendering engine into skipping this?  It isn't enough to set the border="0" ourselves in the extra HTML properties, because then both are generated and the Notes one happens to win.  Instead, we use a different trick.  We had a new column to the left of the first column, set its width to the minimum, and turn off the borders for all sides.  If we want, we can even hide this column from Notes entirely by using the hide-when flag for Notes.  The table looks exactly the same in Notes, but works much better on the web.  I could show you images, but just check out Alan's latest posting to see how it looks for yourself in the browser of your choise: Alan's latest post

Copyright 2006 Genii Software Ltd.

What has been said:

444.1. Doug Cohen
(03/08/2006 09:32 AM)

You should try something a little different in your CSS technique to see how it looks with native Notes/Domino.

Add "border-top:solid black 2px; border-left:0px; border-right:0px; border-bottom:solid black 2px" as your table style.

Add "border=0" to the "Other" area.

This should get you pretty close and then you can show how Midas was even better.

444.2. Doug Cohen
(03/08/2006 09:33 AM)

A follow-up. I just finished reading that you said the Notes border=1 takes precedence, but I have not found this to be the case in many web applications.

444.3. Ben Langhinrichs
(03/14/2006 04:23 AM)

I'll give this a try and report back when I can.