Common pitfalls in HTML and CSS
Many problems in formatting and layout can be traced to tags that are left open, improperly nested tages, or extraneous empty tags. One way to find coding errors like these is to use an HTML/CSS validator. A validator will examine the code of a file or set of files and find syntax errors. It will also give you some explanation of the error and indicate how to fix it.
Using a validator:
To validate HTML, you have two options:
- In Dreamweaver, choose File > Validate > Markup (Shift-F6).
- Using the W3C Markup Validator, either validate a document online, or by file upload.
The validator results will help you find missing tags and other errors.
To validate CSS, use the W3C CSS Validation Service, either by uploading a local file or by entering the address of an online document.
Other things to look for when dealing with formatting problems:
- Sizes specified once in HTML and again in CSS, or objects of larger size nested within objects of smaller size.
- Images, tables and embedded objects can have sizes specified in HTML attributes and also in CSS declarations. It's best to keep size specification to one or the other.
- If a larger object placed within a smaller one, it will usually expand the dimensions of the containing object and "break" your layout. Understand the CSS box model. The dimensions of a block element are the sum of its width/height, padding, borders, and margin. If you're not sure exactly how much space an element occupies, set border/outline on the element and its container to an obtrusive color, in order to draw lines around the spaces in question.
- Browser bugs can cause many problems in alignment. You should test your pages in multiple browsers, to reveal any trouble spots. Position Is Everything is an excellent resource to learn about browser rendering bugs and possible workarounds. Unfortunately, browser bugs are so numerous and varied that it is beyond the scope of this lesson to examine them in detail.
Lesson index | Flash overview | Animation with playback controls | Interactive graphic | Importing external media in Flash | Common pitfalls in HTML and CSS | Embedding media objects in HTML