Obata Sears

If you like to experiment with your CSS you’ll also end up troubleshooting  your changes.

CSS errors fall into several categories:

1. cascade miscalculation
2. browser (in)compatibility
3. positioning error
4. and of course, need we mention the trusty user error

If you’re running into trouble, of course the first thing you checked was #5, clear the cache, or  forgot the ‘#’ sign for the hex number, forgot the ‘;’, or forgot to close the bracket.  Once that’s out of the way, where do you go next?

Do a taste test for the flavor of your error; get a gut level reaction to which area it’s coming from from the list above.  If your code looks good, you’ll verify the cascade is good with a CSS tool like Firefox Web Developer (available as a Firefox plug-in  for the PC and Mac), or if you’re lucky enough to be running CSSEdit (MacRabbit program — you guessed it Mac only), you can fix just about any style error. These CSS tools (and others) will make it very obvious how to come up with the specific syntax for the class or id you want to create.

Okay, so let’s say you checked the cascade and it looks good, here’s another suspect: browser incompatibility. Browsers are about  as faithful and good for their word as a Wall Street concocted derivative, (and I know, I used to work in one of those offices).  Check the “error” in  a couple of different browsers.  If it’s still a problem  you can look for a hack, but then you’re going down the road of maintaining that hack –  advisable to just try a different method that avoids the conflict.

Positioning error?  Well, that deserves a whole article of its own.  Coming soon.

Take this example. Let’s say you did a beautiful job of styling bullets — but they’re not working — the harsh truth is that different browsers express the spacing around bullets differently.  Fortunately, unlike people, you can flatten out the differences between browsers, by doing a browser “reset” at the very beginning of your stylesheet.  For example you set all elements to 0 margin and 0 padding like this:

 * {margin:0; padding:0;}

There are many examples of browser resets on the web.  Eric Meyers’ is one of my favorites — well documented.

here’s the beginning of his browser reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

Read his article for an excellent explanation.

Css shorthand is nice.  We like it not just because it’s compact, but because it groups up attributes and makes it simpler to maintain and to modify your stylesheets.  Nobody wants a 2000 line stylesheet.

Let’s take the border property for example, you’d like a box with a 3 pixel medium gray border.  This could be written as:

.box {border: 3px solid gray;}

Let’s say you want paragraphs inside that box to have italic serif text with a lot of leading, that would be:

.box {border: 3px solid gray; font: italic normal  1em/2em georgia, “Times New Roman”, serif; }

Note that some of the properties will be required and some are not.  For instance, the required attributes  for font are:  size, and font family (font family names are separated with commas, and compound names are bracketed with quotation marks).

In this example, all  properties are shown, and those that are required are in bold:

font: italic small-caps bold 12px / 18px arial, helvetica, sans-serif;
<'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

I would recommend sticking to the order as described by the W3C.  Some browser versions seem to be picky about this.  You can skip any non-required properties.

Refer to the W3C documentation to confirm which are required for other classes.  That’s it!