Recommended video - The Top 5 Mistakes of Massive CSS

I rarely post links, but if you're working with CSS, you really need to watch this video. It contains several great tips that help you write more maintanable CSS.

Clearing floats in IE7 for Vista

I've used this method for clearing floats in my layouts.

It worked in all browsers I tested on. Then customers (using IE7/Vista) started reporting strange layout bugs that I (using IE7/XP) wasn't able to reproduce. It turns out IE7 for Windows Vista renders slightly different than IE7 for Windows XP.

I believe the main difference is when hasLayout is triggered on the styled elements.

To make the clearing of the floats work in IE7 for vista, i added this property:
height: auto

Example of fix:

/* Clear floats in the #content-element */
#content { overflow: auto; }
/* Fix for IE7/Vista hasLayout bug (resets the hasLayout property) */
*:first-child+html #content { height: auto; }

This resets the hasLayout property on the element.

The fix style rule is read/used by IE7/XP also, but it shouldn't have any negative side-effects.

Domino Developer Plugin for Aptana Studio - Version 0.6.0 Now Available

Just got a mail about a new version of the plugin.

This update features:
* Full compatibility with Aptana Studio 1.2
* Support for path/folder information in design element names
* Support for local databases
* Support for drag & drop copying to and from the file system
* Fixed last byte truncation bug affecting certain file resource lengths
* Improved performance retrieving design elements from large databases

For a complete list of changes in this release:
http://code.google.com/p/domino-aptana/issues/list?can=1&q=milestone:Release0.6

To install or upgrade to this version, point your Eclipse/Aptanaupdate manager to:
http://www.jeffgilfelt.com/eclipseplugins/

For further information and complete installation instructions:
http://www.jeffgilfelt.com/DominoAptana/

To participate in the project or to access the source code:
http://code.google.com/p/domino-aptana/

I know I'm downloading it. If you work with CSS and/or Javascript-files for Notes/Domino applications, I recommend that you try it out.

CSS - Browser independent column styling

Styling on a column level can be a really powerful tool to create great looking tables. I'm no designer, so I can't show you how to create great looking columns, but I can show you the points of attack.

By using only "one point of attack" in the markup per column makes for leaner pages. By that, I mean that you could put a class on each td (first, second, etc) on every row, but that isn't really necessary, and with big tables, big html.

Internet Explorer supports a lot of styling opportunities with the colgroup element. With Firefox and Opera (not sure about Safari), you can only apply a handful of styles using this element, but on the other hand, they fully support CSS 2.1 which has some really powerful selectors.

Example of unstyled columns

Styling for < IE 7

I have three colgroups, one for each column. The first for column one, second for...
<colgroup id="name" />
<colgroup id="address" />
<colgroup id="guild" />

Using the CSS 1 id selector, #, it's quite easy to style columns in older IE browsers:
#name { font-weight: bold; width: 200px; background: #eee; }
#address { width: 150px; color: #888; }
#guild { font-style: italic; }

Example of styling using colgroup

Styling for modern browsers (FF, Opera, Safari)

To get a reference to specific columns, I use the :first-child selector, and the adjacent sibling selector.

First column in the table body (the table has id="css21"):
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }

Second column:
#css21 tbody td:first-child + td { width: 150px; color: #888; }

Third column:
#css21 tbody td:first-child + td + td { font-style: italic; }

For more columns, simply add + td per column.

Example of styling using CSS 2.1

The CSS combined

#name { font-weight: bold; width: 200px; background: #eee; }
#css21 tbody td:first-child { font-weight: bold; width: 200px; background: #eee; }

#address { width: 150px; color: #888; }
#css21 tbody td:first-child + td { width: 150px; color: #888; }

#guild { font-style: italic; }
#css21 tbody td:first-child + td + td { font-style: italic; }

Example using both colgroup and CSS 2.1 styling

The reason for the redundancy is that IE6 seem to ignore styles that uses the above CSS 2.1 selectors, instead of ignoring the selector.

This would be ignored by IE6:
#guild, #css21 tbody td:first-child + td + td { font-style: italic; }

To remove the redundancy from the rendering engine of the browser, you could exploit the star html bug in pre IE 7 browsers. Add * html before each colgroup-styling. Then the rendering engines of IE 6 and older browsers see those styles, whereas modern browsers only see the CSS 2.1 selector styles.

Example:
/* Only visible to pre IE 7 */
* html #guild { font-style: italic; }
/* For modern browsers */
#css21 tbody td:first-child + td + td { font-style: italic; }

Great CSS 2.1 information

456 Berea Street CSS Selectors Part 1
456 Berea Street CSS Selectors Part 2
456 Berea Street CSS Selectors Part 3

Comments, critique, etc. are as always appreciated!

Highlighting fields on "Entering" with CSS in the Notes Client

Since I have vacation now, I have more time to try out different stuff i've been wondering about.

This is one of those things.

>> Download Demo Application

For some months now, I've wanted to look at possibilities of dynamic usage of CSS in the Notes Client. It is somewhat possible, but you have to close/reopen the document you're working on (+mess with SaveOptions), and you need a subform/stylesheet per state.

Unless someone finds out how to set the id of an element dynamically, this example, with one state per field will probably require too many design-elements to be put into a real-life system.

What I have to do for this demo, as previously stated, is to have one CSS-file/subform per field (since each field-focus is a different state) in the form. This because I only want to highlight the field when it has focus. To do this without a dynamic parent class or id, seems impossible.

Inline CSS for Notes WYSIWYG tables doesn't work. Putting a Pass-Through-HTML element around Notes WYSIWYG elemements doesn't work. With WYSIWYG, I mean Create->Field/Table/Button/etc.

It seems Notes first renders one, then the other. E.g. first render P-T-HTML, then WYSIWYG. This makes it impossible to wrap WYSIWYG elements with other elements with dynamic id's and classes.

My example:

The name-field has focus -> load css for field1 (computed subform containing resource=Environment( "fieldName" ).

Every CSS-file has this structure:
#nameOfField{
/* where #nameOfField is a TD that contains the input element */
background-color: #ffd;
/*
Strange that Notes has different shorthand order than the W3C spec.
Notes, border: color style width;
W3C, border: width style color;
*/
border: #555 solid 1px;
}

What I want:

field1 gets focus. Set environment variable. Containing element of a part of the form has computed "class=\"" + @Environment("name") + "\"".

In form:
<div class=<computed value>>
##WYSIWYG BLOCK##
</div>

In CSS:

.field1 #field1 {/* CSS for td containing field1, when it has focus */}
.field2 #field2 {/* CSS for td containing field2, when it has focus */}


With a dynamically named parent element, I should be able to put all CSS into one file.

If any of you find out more elegant ways of doing this particular functionality, please let me know.

Good CSS-in-Notes resource I stumbled upon (german):
Description of possibilities/limitations of CSS in the Notes-Client

Partially translated by Google (I don't speak german)