This is not a tutorial. This will not tell you how to fix the problems you encounter. This is a list of guidelines that will help you identify what the problem is, so that you can take the steps you need to fix it. This guide has to be relitively vague, as its not about one specific problem, its about every problem you're ever likely to encounter.
Fixing these problems quickly, so that you don't waste your time, and your client's money, will come with gaining experience and knowledge, and hopefully this guide will get you started in the right direction.
1. Houston, we have a problem
First, identify that you have a problem. A simple step you would think. A lot of problems I encounter on a day to day basis are very small visual discrepancies, and only by testing your layouts well, and having a good eye for detail, will you notice a lot of these.
Because my tutorials are aimed at designers, I'm going to assume you already have a keen eye for detail, and hopefully, you designed the site, and have strong expectations of how things *should* look.
So you've noticed something is wrong. Lets figure out whats causing it.
2. Human Error
Yes, the first thing to check is that its not your fault. This is the first thing you should do because it stops you looking like an idiot further down the track when you ask other people for help, and the other reason, is that more often than not, it will be your fault. At least when you're starting. So check (and double check) the following pitfalls:
- Check your spelling. Check that you're class and id names are spelled correctly, both in the CSS and HTML.
- Check your paths. Check the path to your CSS file, or any image paths if there's an image display problem.
- Check your casing. Some browsers and OS's are case sensitive, and an id of #MyAwesomeID, will be interpreted differently to #myawesomeid.
Although it wont stop you looking silly, getting someone else to have a look at your code quickly can be a much faster way of detecting errors like this. Other people tend to find your spelling mistakes quicker than you can yourself. I don't know why, but it tends to be the case.
3. Validate it
The major benefit of writing valid (X)HTML and CSS is the ability to validate your code. If you know your code should be valid, a quick run through an online validator can pick up things like missing attribute quotes, unclosed tags, incorrect nesting of tags, and all kinds of things that can cause you problems.
If you're using Opera, ALT+CTRL+V will validate the current page for you.