- 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.