Problems with style sheets in Web Standard applications

Web|web Standard | problem | style sheet

A. CSS checksum problem

First, according to the requirements of the competition, the entries must conform to XHTML standards, and the submitted CSS must be validated by the consortium. CSS Check the situation is more ideal, the entries only 8 works failed CSS2.0 Check, the main error is: "line:0 font-family: suggest you designate a family of species as the final choice."

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" to ensure that the page 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

1. 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.
2. 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

Because it is the style table competition, we pay attention to the CSS checksum, but in the XHTML compliance with the standards of a little overlooked, there are many low-level errors. The main issues are listed below:

2. 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;
4. 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.
6. <br> must be written as <br/>,xhtml require all labels to be closed, and the unpaired label will be added "/" directly to the back.
8. 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.
10. <meta http-equiv= "Content-type" content= "text/html; charset= "gb2312"/> It is obvious that the content attribute value has one more quotation mark inside it.
11. 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#version=5,0,0,0 "width=" height= "> <param name=" Quality "value=" High "> <param name=" Wmode "value=" Transparent "> <param name=" SRC "value=" http://www.webjx.com/htmldata/2005-02-23/test.swf "> <embed src= "http://www.webjx.com/htmldata/2005-02-23/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. More notes: Reference http://www.blueidea.com/tech/site/2004/1920.asp

    1. 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

    There are 12 works in IE6.0, Mozilla Firefox1.0, Opera 7.12 in the view of deformation and dislocation. (I didn't use the IE5.0 test, lazy:) IE5.0 is a challenge for all CSS layout designers.

    1. 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;
    2. 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.

    In general, the entries are generally qualified, the goal of this competition has been basically achieved, web standards and CSS layout has been more and more designers and master. For some of the works of the poor, I think this is a process, senior designers should remember the table layout just appeared, the Web page is mostly very simple. CSS layout after a period of digestion, understanding and application, there will be more like the first prize works such as the technical appearance of both the emergence of the Web page.