Summary of problems in Div Web layout learning

The application of Div Web page layout, the production of Web-standard Web site, easy to appear some problems.

Now summarize so that you can see that the problem is there.

The problem of the CSS check

We design Web pages that are expected to conform to XHTML standards, CSS through the verification of the consortium. Some failed to pass the CSS2.0 checksum, the main checksum error is: "line:0 font-family: It is recommended that you designate a family of species as the final option."

When the consortium recommends a font definition, it ends up with a font of one category instead of ending with a single font. For example, "serif" can ensure that Web fonts can be displayed under different operating systems.

Although most people define "serif" on the body tag, the serif is omitted when another font is defined in another ID or class, and is considered to be a checksum. This error is not very serious, as long as a little attention can be avoided.

Two, the writing proposal of the CSS

Annotate the CSS file. Comments will be convenient for your future maintenance, it is recommended to annotate CSS files whenever possible, do not worry about adding a small number of bytes. Try to abbreviate CSS syntax. For example, the color value "#FFFFFF" can be written as "#FFF"; padding-top:30px; Padding-right:0;padding-bottom:10px;padding-left:2 0px "can be abbreviated to" padding:30px 0 10px 20px; ". There are more savings tips on defining skills, and you'll find better ways to keep up with CSS applications.

Third, XHTML checksum problem

Often we pay attention to the verification of CSS, but in the XHTML compliance with the standards of a little overlooked, there are many low-level errors. The main issues are listed below:

Target= "_blank", this syntax in HTML4.0 is correct, in XHTML1.0 is not allowed to use. One of the solutions is to write target= "new", and another way is to use JS to handle all target;

Style sheets are best not embedded, and the stylesheet files are independent and easy to maintain. If inline style must be written as a style type= "text/css", the type cannot be ignored, otherwise XHTML will not be able to determine what your style does.

BR must be written as BR/,xhtml require all labels to be closed, and the unpaired label will be added "/" directly behind.

Reuse the same ID. An ID can only be used 1 times in XHTML, and class should be used if multiple references to styles are required.

Flash Embedding method error. Embed was the first private label for Netscape, even though it was later supported by IE, but it was never recognized by the HTML4.0, which did not embed the label. The consortium advocates the use of object tags. To address the compatibility of different browsers, one workaround is to use 2 tags.

The complete sample code is as follows (flash background is transparent):

<object classid= "clsid:27cdb6e-ae6d-11cf-96b8-444553540000 codebase=" http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "width=" "height=" > <param name= "Quality" high "> <param name=" wmode "value=" Transparent "> <param name=" SRC "value=" test.swf "> <embed src=" test.swf "wmode=" Transparent "quality=" High "pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi? P1_prod_version=shockwaveflash "type=" Application/x-shockwave-flash "width=" height= "> </embed> </object>

But it is still not possible to write directly in XHTML, we can now only write the above code in the Flash.js file, and then tune to cheat the checksum.

The question of whether Flash meets the standards is a matter of dispute.

Similar Id=header class=title code should be written id= "header" class= "title". Quoting attribute values is the most XHTML basic syntax rule.

Iv. compatibility issues

Some sites in IE6.0, Mozilla Firefox1.0, Opera 7.12 in the view of deformation and dislocation.

Centered in IE, but not in Mozilla. Set body {text-align:center} in IE Can already be centered, but in Mozilla you must add the following style settings to the layer that needs to be centered: Margin-right:auto; Margin-left:auto;

exceeds the width. Look at the normal page in Mozilla, in IE, because the width of the deformation, side-by layer moved to the bottom. This is because IE and Mozilla explain the difference between the box model, there are many solutions, such as "!important" method.

Web standards and CSS layouts have been and mastered by more and more designers. CSS layout after a period of digestion, understanding and application, there will be more technical appearance of both the Web page emerges.