DIV CSS Page layout learning easy to appear in the summary of problems

css| Page | questions

The application of DIV+CSS 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.

A. CSS checksum problem

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, "Sans-serif" can ensure that Web fonts can be displayed under different operating systems.

Although most people define "Sans-serif" on the body tag, the SANS-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. CSS writing suggestions

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 the use of CSS.

Three. 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 <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 to the back.
Use the same ID repeatedly. An ID can only be used 1 times in XHTML, and class should be used if multiple references to styles are required.
Flash's embedding method error. <embed> was initially Netscape's private label, even though it was later supported by IE, but it has not been recognized by the HTML4.0, and there is no <embed> in the label. The consortium advocates the adoption of <object> labels. 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"
Width= "height=" >
<param name= "Quality" value= "High" >
<param name= "wmode" value= "Transparent" >
<param name= "SRC" value= "http://www.webjx.com/htmldata/2007-06-28/test.swf" >
<embed src= "http://www.webjx.com/htmldata/2007-06-28/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.

<script type= "Text/javascript" src= "Flash.js" ></script>

The question of whether flash conforms to the standard 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.

Four. Compatibility issues

Some sites in IE6.0, Mozilla Firefox1.0, Opera 7.12 in the view of deformation and dislocation.
Center in IE, but not in Mozilla. Set the 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.