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 here
and here
and here
and here

but on the web it looks like
Inline GIF image

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.

What has been said:

No documents found