Ben Langhinrichs

Photograph of Ben Langhinrichs

E-mail address - Ben Langhinrichs

Recent posts

Wed 15 Jan 2020

The tree you are busy hugging has new branches

Fri 20 Dec 2019

Changes coming in the new year

Tue 22 Oct 2019

Domino is used by, you know, actual business people

January, 2020
   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 31

Search the weblog

Genii Weblog

Web borders like Notes borders

Tue 11 Nov 2003, 09:50 PM

by Ben Langhinrichs
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:

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.

What has been said:

No documents found