how to learn css | css tutorial - begin | css tutorial - advanced
how to fix css problems | css faq | more in this directory

how to fix web page problems

check your code

The web browser only knows the code that you give it. If "it's not working", it's only the code you gave!
So the only solution is: check your code:

1. At the very least, your page should have the codes you see in this template
   (It doesn't need to have the comments though!)
2. All your content should be "in a box" — that is, inside some tag. For example,
   Paragraph texts should be inside opening <p> and closing </p>
   A list item should be inside opening <li> and closing </li>
   And on like that.
3. If your tag has any properties or styles, the property should always be in quotes. And there should be no spaces before or after the =
   So, do like this: <p style="text-align: center;">
   NOT this: <p style=text-align: center;>
   NOT this: <p style = "text-align: center;">
   

divide and conquer

If we are having a problem with a web page, our natural reaction is to want to try to fix the problem right on that page, which often ends up in frustration.

But when someone builds a house, he doesn't throw up an entire wall here and there, build half the roof, and then start building another wall. First one brick, then another brick, then another brick ...

The same principle works for building web pages (and programs)! And this is the real way that real developers (and programmers) do things.

Best thing is to start small, then add things. Don't try to do everything at once in the full page.

So if you are having some problem on a page:

Make another, simple, html page, that contains only the code for the problem. Then practice doing stuff with that problem.

Example:
If you are having trouble figuring out how to make a div float to the right:

• Make an html page with one <div> and a little text in it.
  
  Don't even use a separate stylesheet — that will complicate things.
• Just put your style in your div tags or any other tags ...
   <div style="float: right;">
• Then you gradually add the things you want from the real page. Until it breaks and then you learn the next thing :)

let your computer help you

The usual problem with our html or css code is some stupid little thing that we just aren't finding with our human eyes. We can let the computer find it for us!

There are many useful tools that will check our code. Here are three of the easiest to get (and probably the best!)

1. The "syntax coloring" in your editor, or in "view source" in your browser.

Most good text editors and broswers make different colors for different parts of your code. If you see the pattern of the colors doesn't look right, you can probably see where your html went wrong.

2. "Validate" your HTML

"Validate" means let a program check your html code and make sure that all tags have endings, quotes are in right place ... all those little things that our eyes can miss. http://validator.w3.org/

3. Firefox tool: Error console

Under the FireFox "Tools" menu is "Error console". It will show you any problems with your css code. (Also javascript problems. Also every problem on every web page that is loaded in your browser! So to see only *your* page problems, hit the "clear" button, and then load your problem web page again.)

4. Firefox extension: Firebug

This is a great extension (add-on) to FireFox that shows all kinds of things about our html and css code.

Any serious web developer in the world is using Firebug. Without you are working with one arm tied behind your back! Get it here: https://addons.mozilla.org/en-US/firefox/addon/firebug/
(More useful Firefox extensions are here.)

5. Validate your CSS

Check your CSS code — let this program find all the little things that cause trouble: http://jigsaw.w3.org/css-validator/

3-how_to_fix_css_problems.html
rev. 29 April 2012