Simian Design, by Tony Stephens

  • elsewhere

    • Label Placement on Forms

      When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form.

      August 5 at 12:44 pm
    • A Scenic Night in Binbrook

      July 5, 2008 I had the pleasure of observing and photographing the stars at a local conservation area and dark sky site in Binbrook, Ontario, Canada. I imaged this scene with an unmodified Canon 40D, Sigma 17-70mm lens (17mm @f2.8) and standard camera tripod with no tracking. This is a stack of 15x20sec exposures @ ISO 800 on the Milkyway down to the tree line, and another single 20sec exposure on the rest of the landscape below to create a two frame composite. Stacking was done in Deep Sky Stacker and processing was done in PS with layers. I was really lucky that the the water was beautiful and still enough so that the stars casted a nice reflection in the water. In this shot you can also see Jupiter, various nebulas in the MilkyWay, Rho Ophiuchus and the light dome from a distant town. Published: NASA Astronomy Picture of the Day SkyNews Photo of the week #349

      August 5 at 12:35 pm
    • Concept Ships

      A great site with a collection of space ship designs, art and concepts. Great for the inner geek in you.

      August 5 at 12:26 pm
  • Posted on February 2nd, 2007
  • Posted in CSS

Some good CSS techniques.

Montoya writes about some CSS techniques he uses all the time.  There are some good gems in here.

The initial base css files he starts with are from  Starting with CSS: Revisited.  I like the full resetting and stating of many elements here.

/* =INITIAL
v2.1, by Faruk Ates - www.kurafire.net
Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling:
Elements we want to clean out entirely: */
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}

/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
	}

Montoya also mentions an important setting I think is a good one.  Line-height. (line-height:1.4) Setting the default line-height does increase readability, and that’s a good thing.
The next section is the one I found as new.

html { font-size:100.01%; }
body { font-size:1em; }

Setting the font-size to 100.01% fixes some problems. The explanation for this comes from “CSS: Getting Into Good Coding Habits:”

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.

The rest of the article does go into some good topics, well worth the read.  Safe fluid columns, browser filtering, property ordering are some of those topics.  Nice write-up Montoya.