Ben Langhinrichs

Photograph of Ben Langhinrichs

E-mail address - Ben Langhinrichs






November, 2003
SMTWTFS
      01
02 03 04 05 06 07 08
09 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

Search the weblog





























Genii Weblog


Civility in critiquing the ideas of others is no vice. Rudeness in defending your own ideas is no virtue.


Tue 11 Nov 2003, 09:50 PM
Notes/Web Coexistence Tip #3

Notes developers confronted with web development are often stymied by the "little things", especially when it comes to GUI or "look and feel" issues.  One frequent complaint is that while a table in Notes has nice thin lines, the same table in a browser has that odd "groove" look.  In other words, in Notes, a table looks like:
Stuff hereand here
and hereand here


but on the web it looks like


I have read numerous posts about why this is a reason to use pass-thru HTML, or a whole bunch of complicated CSS.  Just today on the Notes 4&5 Gold forum, a person proposed the following CSS along with turning off the borders in Notes:

TABLE.Linetable TD, TR, TH {
margin-top: 2px; 
margin: 2px; 
padding-top: 2px; 
padding: 2px; 
border-width: 1px; 
border-color: #000000; 
border-style: solid;
}

After proposing this, he says that it doesn't even work properly, since the inner and outer borders are not both thin.

Well, hold on a minute.  You can have your nice thin borders, and you can do it without a whole bunch of CSS.  Simply go to the HTML properties for the table, leaving the borders just as they are in Notes, and add the following text in the style box:

border-collapse: collapse;

This will cause your table to render with those nice thin lines.  If you really want this to be more universal, you can add CSS code that says:

TABLE {
border-collapse: collapse;
}

and all your tables will be rendered this way.

Now, this doesn't address other specialized issues such as borders that are different for different cells, but it is a heck of a lot simpler way to make your web table look like your Notes table, and it leaves the two looking the same, which is a key component of coexistence, or WYSIWYG, for that matter.

By the way, you'll notice if you View Source that I used this tip myself on the first table in this article, so if it doesn't render with nice thin lines in your browser, you must have a browser that doesn't support this (usually a very old browser).

Copyright © 2003 Genii Software Ltd.