10 common reasons why CSS is not valid in page layouts

Source: Internet
Author: User
Tags browsers code consortium data design different error how to

We learn div Web layout, but the validation is sometimes difficult to manipulate, but with it you can see the errors caused by the layout. 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 several reasons why the layout is not valid.

One, 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.

Second, 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 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.

Iii. Improper DOCTYPE Declaration

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.

Four, 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 like image tags.

This is not valid in strict DOCTYPE. To resolve this issue, add "/" at the end of the IMG tag.

V. Align label

If DOCTYPE is set to transitional, you will use the "align" tag, but if you ask for a higher order of 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" instead of the align conversion element.

Six, JavaScript

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

Seven, 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.

VIII. Unknown Entity Data

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

Nine, bad nesting

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

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.