Web site refactoring Div Common errors

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The Css+div refactoring is one of the commonly used terms in Web site standards (or "web standards"), typically, to illustrate the difference in how tables are positioned in the HTML web design language, because the XHTML web design standard does not use table positioning technology, it uses the dragon-punch to consolidate CSS +div way to achieve a variety of positioning. It is easy to make mistakes when applying div coding. This article lists some common errors:

1. Check the HTML elements for spelling errors, forgetting to end tags

Even veterans often mistake div for nesting relationships. You can use the Dreamweaver verification function to check for errors.

2. Check that the CSS is correct

Check to see if there are any spelling errors, forgetting the end of the}, and so on. The CLEANCSS can be used to check the spelling errors of CSS. CLEANCSS is a tool for CSS to lose weight, but can also check out spelling mistakes.

3. Determine where the error occurred

If the error affects the overall layout, you can delete the div block individually until a div block is removed and the display returns to normal to determine where the error occurred.

4. Using the Border property to determine the layout characteristics of an error element

Using the Float property layout accidentally makes an error. Dragon Refactoring at this point, add the border attribute to the element to determine the bounds of the element, and the reason for the error is the

5. The parent element of a FLOAT element cannot specify a clear property

Macie If the clear attribute is used for the parent element of a float element, the surrounding float element layout is confused. This is the famous bug of Macie, if do not know will detours.

6. Float element must specify the Width property

Many browsers have bugs when displaying float elements that do not specify a width. So regardless of the contents of the float element, be sure to specify the width attribute.

Use EM instead of PX as a unit when specifying elements.

7. Float element cannot specify properties such as margin and padding

IE has a bug when displaying float elements that specify margin and padding. Dragon Refactoring therefore do not specify the margin and padding attributes for float elements (you can nest a div inside a float element to set up margin and padding). You can also use the Hack method to specify special values for IE.

8. The sum of the width of the float element is less than 100%

If the width of the float element is exactly 100%, some old browsers will not display properly. Make sure the sum of width is less than 99%.

9. Did you reset the default style?

Some properties such as margin, padding, and so on, different browsers will have different interpretations. Therefore, it is best to first of all margin, padding set to 0, list style set to none, etc.

10. Have you forgotten to write a DTD?

If no matter how to adjust different browser display results or not the same, the Dragon refactoring so you can check the beginning of the page is not forget to write the following line DTD:

Http://www.w3.org/TR/html4/loose.dtd

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.