10 common CSS and HTML errors in web layout

Web layout is very important in web design. When using CSS and HTML for web page layout, we often make some common errors. 1. Check whether the HTML element is misspelled and whether forgetting the closing tag. Even the veteran is also often mistaken of div nested relations. Use the Dreamweaver validation function to check for errors.

2. Check whether the CSS is written accurately. Check whether there is inspects spelling mistake, whether to forget the ending} and so on. Use CleanCSS to check the CSS spelling errors. CleanCSS originally is the tool which CSS loses weight, but can also inspect the spelling mistake.

3. Use removing method to determine the location of the occurred error. If the error affected the overall layout, you can remove the div-by-block. Until remove a div block, the show returns to normal. Then you can determine the location of the error occurred.

4. Use border attribute characteristics to determine the layout feature of an error element. There will be error never even noticed when using the float attribute layout. Then add a border attribute for the element to determine the boundary elements, error reason is get to the bottom.

5. The parent element of float element can not specify clear property. When using the clear properties to the parent element of float elements under MacIE, the layout of float element around will be chaos. This is MacIE famous bug.

6. Float element attributes must be specified width attribute. When many browsers display the float element which is not specified width, there will be bug. So no matter what the contents of float elements, we must assign a width attribute. Also try to use em instead of px as the unit when specifying element.

7. The float element cannot be assigned margin or padding attributes. When IE show the float element which has assigned margin and padding, it has bug. Therefore do not assign margin and padding attribute to the float element (We can nested a div within float element to set margin and padding).

8. Float element width sum is less than 100%. If the width sum of float elements is exactly 100%, some of the older browser will not display properly. Therefore please guarantee that sum of the width is smaller than 99%.

9. Whether to have reset the default style? For some properties such as margin, padding and so on, different browsers have different interpretation. So the best is first of all to set the margin and padding to 0 and set the list style to none before the development.

10. Whether to have forgotten writes DTD? If the different browsers display results are still not the same no matter how to adjust, you can check the page beginning whether is forgotten to write DTD statement.