10 common reasons why CSS is not valid in Div+css page layouts

Source: Internet
Author: User
Tags add html tags valid


Core Tip: We learn div+css Web layout knowledge, but the validation is sometimes difficult to operate, but you can use it to view the errors caused by the layout design. The validator throws a lot of errors and warnings, stating that your XHTML is not yet complete and may not be consistent on different browsers.


We learn about DIV+CSS Web layout, but the validation is sometimes difficult to manipulate, but with it you can see the errors caused by the layout design. The validator throws a lot of errors and warnings, stating that your XHTML is not yet complete and may not be consistent on different browsers. Here are 10 minor failure problems that have baffled a large number of programmers, and this article tells you how to solve them. Before you begin this article, introduce some of the issues you need to be aware of when using the Consortium verifier.

1, do not worry about the validation program warning: If the validator said found 12 errors and 83 warnings, ignore it, continue to the next step.
2. Correct one error at a time: progress in order, from top to bottom, fix an error one time. HTML is browsed from top to bottom in browsers, and these errors are displayed in the same order.
3. Every time you revise your code, you need to refresh the code to make it work again: A small error often triggers an entire page of string errors. Therefore, if the operation is not correct, "fix error" may cause more errors. Make the code work again after each correction to ensure that the problem is completely resolved.
Knowing the above basic anomalies, let's take a look at some of the reasons why the layout is not valid.

  1   the div tag is not closed
This is one of the most common causes of page design failure. It's always a surprise when we learn that this is the culprit of how many exquisite plate designs fail. The Open div tag is one of the most common mistakes in plate design and one of the most difficult to diagnose. The validator sometimes points to the wrong open div tag, which is as troublesome as a needle in a haystack.

  2 , the trouble of the Embed label
In the early 90, Microsoft and Netscape browsers began to recognize non-standard, unique fonts. Unfortunately this means that the Consortium verifier does not yet recognize certain key HTML tags, such as "embed", even though these tags are already widely used. If you do want to get strict DOCTYPE (document type) validation, you can only discard nesting.
If you want to take effective layout design and embedded media, try the flash Satay method.

  3 . Improper declaration of DOCTYPE
It is also a common error to not declare doctype, or doctype the file to start an error declaration. According to the general experience, Strict DOCTYPE is the highest level of verification that everyone pursues. Strict validation shows that your Web page can be best displayed in all browsers. For a statement of the DTD document type, you can refer to the 52css.com article.

  4 , trailing slash
If your site is not validated, it is likely that a trailing slash has been omitted somewhere in the code. It's easy to ignore things like trailing slashes, especially in elements such as image tags.
This is not valid in the strict DOCTYPE. To resolve this issue, add "/" at the end of the IMG tag.

  5 , align label
If DOCTYPE is set to transitional, you will use the "align" tag, but if you ask for a higher order to get strict validation, you will see a lot of errors. Align is another label that is not available for layout design. You can try substituting "float" or "text-align" for the align conversion element.

  6 , JavaScript
If you've already declared strict DOCTYPE, you'll need to overwrite the CDATA tags in JavaScript. This aspect of the validator has baffled many programmers, because the Web site tends to use embedded JavaScript for advertising and tracking scripts. If you must use JavaScript, you can precede it with the following label:

  7 , the image needs the "alt" attribute
You may not have noticed that the image is also a potential stumbling block to advanced validation. In addition to the trailing slash, advanced validation also requires an ALT tag to describe the image, such as alt= "Scary vampire picture".
Search engines also rely on ALT tags to identify images on a Web page, so it's always good to add alt tags anyway.

  8 . Unknown Entity Data
Entity data is another easy to make error that affects validation. We can consider using the appropriate coded characters instead of "&" and other symbols. The entire list lists the appropriate encoded character entity data that is available in the XHTML design.

  9 , bad nesting
Nesting is an element that includes elements, and it is easy to confuse the order of nested elements. For example, start the strong tag before the DIV tag, but close the div tag first. This may not change the layout of the plate, but it will invalidate your plate design.

   10, missing "title" tag
Although this may seem like an obvious mistake, many programmers (myself included) often omit title tags from the head section. When you see "missing a required sub-element of head" (missing the necessary child elements of head), you will find yourself forgetting to add the title tag.


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.