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.

There are several parts to your website: the domain name (e.g. xyz.com), the website files, and the server where the files will be stored, and sometimes email associated with that website (e.g. ariel@xyz.com).  Normally these pieces of your website are managed and maintained by different groups who specialize in those areas.  This is certainly not ideal for your average website owner, but it’s the result of the short and explosive growth of the web.

If you’re running on a strict budget, on the other hand, and are willing to do a little research, you can build your own website at a one-stop shop such as godaddy.com.  Godaddy.com allows you to do all the aforementioned pieces of the website setup in one place — including purchasing the domain name.  Domain name/website tools such as Godaddy.com  will result in websites with a somewhat generic look, as they’re being generated by templates, but this solution can be an excellent one for a small shop just starting out.

If you’re looking for some basic control, you’re the next level of user, who will choose their domain name, and then hand over the website design to a website designer or developer, who should then be able to  help the user find a good reliable host where the files will be stored.  Note that both file hosting and domain name are basically being rented to you.  You’ll pay an annual fee to lease the domain name, and usually a monthly fee to house the files.  When you want changes, you’ll contact your initial web designer or developer.

After this level, comes customers who require additional functionality.  These customers might want to be able to update the site daily themselves, sell products through a payment gateway,  interact with social media and might want  have the site search engine optimized.   They might also want to have video edited or uploaded,  email names set up with the company name, and send out bulk email.  This customer will generally need to hire a web designer for the design portion, and a web developer to enable the functionality.  If this is a high volume site, these customers should also be looking for a web team  skilled with maintaining transactional security, backups, failover, monitoring the site for security, maintenance updates, analyzing web logs, and monitoring performance and capacity.

If your product is in an aggressive online market, you may find that you also need to hire a search engine optimizer — and search engine optimization is a continuing task so this might be a monthly operations cost.  If your product is local or is not in a competitive market,  you can  probably have your text reviewed and optimized  during the startup period, and then occasionally when the need arises.

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!

Visa International, internal intranet web site development, data modeling
Charles Schwab, project manager for Schwab Institutional secure web
site
PG&E, internal intranet web site development, data modeling
Morgan Stanley, presentation graphics, computer graphics trainer

SMALL BUSINESS / NON-PROFIT

curriki.org – education website, home page redesign BETA
missionjobshare.com – copy, design, html, CSS
dycmarin.com – website design, development, Joomla CMS, CSS, training
3-waves.com – website design, development, Joomla CMS, CSS
San Anselmo Preschool – website design, development, CMS, deployment,
training
Teamco Advisers - investment advisory firm: website design, web positioning
Raoul Weiller Illustration, web site design, development, and web positioning
Marin Interfaith Council – Redesign — website design, development, WordPress CMS.
TEESO Redesign — CSS website design, development, deployment
Paula Gloistein Photography, Version I, web site design, development, coaching
RVMC, web site design, development, host management, and web positioning
Regency House Imports – web site design, development, deployment
MMCPRO – web site design, development, deployment, training
reddot.com – web coaching, CGI development & deployment
Tagged.com -, web site update, HTML and CSS development
WPCT – Redesign — website design, Contribute integration, development.
srmoms.org – Joomla CMS upgrade from 1.0 to 1.5x, security patches
3-waves.com – Joomla CMS, re-design, copy
studiowabisabi.com – build test environment, CMS, design, copy
studiowabi.com – artist website, CMS, design, copy

If you haven’t figured out your domain name yet, first find out the answer to this important question:  is it available? There are easy to use registration tools, which will allow you to enter many choices at once, and will tell you which, if any, are available. Try out the name finder at Network Solutions.

When coming up with name ideas, you may find the first ones that come to mind were taken years ago. If so, get out your pencil and come up with alternatives.  Numbers and dashes are legal, so you might consider those (for instance, 2dollarbill.com is taken, but 2-dollarbill.com is currently available).  Also consider how firm you are on your domain extension (.com, .org, .net, etc.).  Some of the domain name tools (at Godaddy.com for instance) will offer you other naming combinations.

The name finder at Network Solutions lets you check for availability on up to 10 names in one submission.  This will give you an idea right away as to whether the names you like are available — or if you’re in a really competitive area, you’ll be working on some innovative word combinations.  The domain name purchase itself is low cost, so if you’re down to two names and can’t decide, you can purchase both, and decide later — it’s more important to lock in your name.  The purchase charge is annual; you’re actually leasing the name annually, although you can also buy a multiple year lease.

Barbara Obata began her computer career pre-WWW performing network services and technical support. Losing interest in protocol stacks and network sniffers in the early 90′s, she turned to the web and discovered a whole new realm of possibilities. She started on an intranet project in Silicon Valley, with 9 other developers in a conference room aka, “Web Woom”. Well, the web fun never ended. She develops websites, and integrates CMS tools such as Joomla, WordPress, trains others, and tracks browser incompatibilities. She lives and works in Marin County, California.

web development and update. This is where we build in the functionality of the website.  May include search tools, social media, forms, data collection, reporting.

social media and video integration. We can integrate existing facebook and twitter feeds into your website, or setup facebook and twitter profiles from scratch. We will also edit and integrate video into your website through either Youtube.com or vimeo.com.

web positioning. The site’s content should be presented in a way that will enhance its ranking with search engines. Ranking is dependent on keyword prominence.

web training. We conduct both in-house corporate training as well as one-on-one training to assist website owners to publish their own web pages. Services stretch from straight editing with Dreamweaver, workshops in Adobe Photoshop, to CGI scripting, search engine optimization, and email client contact tools.

web host management. Assistance in acquiring a domain name, web host setup, managing the visitor logs, and monitoring downtime, backup and failover strategies. We also offer temporary domain hosting for web development customers.

Tools

We work with a range of tools.  We generate most of our design work through the CS5 Suite: Photoshop, Illustrator, and Dreamweaver.  We use CSSEdit, straight CSS and HTML, Espresso (the program) and a variety of other tools to generate the web pages.  We set up web environments for our customers using CMS tools such as WordPress and Joomla, PHP scripting, and SQL queries to MySQL database tables.

Email Announcements, Promotions

Creating weekly or monthly specials keeps your valuable services visible. Communicate to your clients about your specials, and new services.