[Top]
   
The colors of this site are rendered correct in MS IE 4.0+, Opera 3.6x+ and Netscape 6.0+/ corresponding Mozilla browsers. This site works overall best with the newest Opera and Mozilla browsers (details). Also Netscape 6.1+, MS IE 5.5+ for Windows, MS IE 5.0 for Mac and new NeoPlanet browsers render this site quite well. The presentation is poor with Netscape 4.x and it has some clear rendering errors. It doesn't render either advisory titles of some elements and all internal links don't work.

All topic groups:
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Shortcuts:
Special links:
All topic groups
[Print]
Search:
[Help]
Table of topic groups > Front page of help pages > Help pages > 1. Help for TM CSS menu

1. Help for TM CSS menu

Topics

Common

This page is primary quite thoroughly information about the menu itself. It has also common information about CSS related issues. This page use as related pages detailed element classifications and the table of all HTML-tags.

Explanations to used abbreviations

Button actions have following abbreviations:

[Top]

Element classifications and behaviours

HTML 4.01 has two basic document types, Strict and Transitional, which has corresponding DTD-files (DTD= Document Type Definition), strict.dtd and loose.dtd. The strict element type has fewer elements and attributes. The listing of transitional (deprecated) elements base on official and it should be ok.

It is import to use elements in valid order because incorrect order may create serious problems and crash some browsers. That's why I have made some behavioural notes. Elements have two basic behavior types, inline and block. Normal block elements create a rectangular box and line break before and after them. Depending of elements they can have both block and inline-level child-elements or only inline-level child-elements. Ordinary inline-level elements don't create rectangular boxes around them and they don't create line breaks. They can have only inline-level child-elements.

Some elements mix these behaviours. The behaviour type is called as flow. The DTD-files says about elements DEL and INS, that these can occur at block or inline level. I have listed them in the button TM CSS - General. They behave in some situations like normal block or inline elements. It is important to remember that they should not be used so that, the start from block level and end to inline level or vice averse. For example this is incorrect:

<ins>Here is the starting point.
<div><b>Here is a block, which has bold text</b>
</ins>
</div>

Note. XHTML DTD-files have a little bit different classifications than HTML 4.01 DTD-files[S] (a separate page).

I have mentioned in the button TM CSS - Objects some behaviour notes. Into CSS3 has added display:inline-block, which display type concerns especially certain form control elements (for example INPUT). Also replaced inline-level elements have the behavior type inline-block (for example IMG and OBJECT).

Elements FIELDSET and FORM are block-level elements. INPUT, SELECT, TEXTAREA, LABEL and BUTTON are listed as inline elements (%formctrl), but the behavior of them is not equal (I tell about differences later in this page). OPTION and OPTIONGROUP are child-elements of SELECT. The element LEGEND is a child-element of FIELDSET. The specification and the DTD-files don't directly say, if it has block or inline behaviour, but from the attributes can be derived that it is an inline-level element. According to CSS2 it is not possible to apply CSS property for these elements. Netscape 6.x/Mozilla 0.6+ or newer Netscape/Mozilla browsers give proposals how to implement CSS for them. Form control elements are defined in CSS3 (I handle them in CSS-site on the page 8. Backgrounds and borders[S]).

The strict document type has in some matters stricter rules because it tries to be the clearer document type. The element BLOCKQUOTE and BODY must have as child-elements some block-level element (NOSCRIPT is listed as a block-level element) or SCRIPT (BODY can have also INS or DEL), but in the transitional document type they can have directly some inline-level child-elements.

<body>
<ins>According to the the strict document type this text needs some block-level parent-element or SCRIPT, INS or DEL.</ins>
<blockquote>
<div>According to the transitional document type this text doesn't need for example the element DIV surround this text.</div>
</blockquote>
</body>

Some elements have special content definitions (for example A, FORM and PRE). The strict and transitional (loose) document types have differences on them. I handle element classifications more comprehensive in another page, where is a detailed element classification[S].

CSS can affect all elements in HTML, which affect to the presentation of HTML-documents. In the non-normative appendix page of the CSS2 specification is said that the full presentation of some HTML elements cannot be expressed in CSS2.

The root element HTML can get CSS even if it should not get %coreattrs;, which belongs three CSS-related attributes (MS IE support them also to HTML, but the supporting is proprietary).

There is some elements, which in principle can have CSS, but which are not all or which are not widely supported. Frameset elements (FRAME and FRAMESET) are supported only in newest MS browsers. MS IE 5.x+, Netscape 6.x+ and Opera 4.x+ support CSS to IFRAME. It is however remarkable, that the frameborder attribute must have the value 0, if the purpose is to define borders also with CSS - otherwise frame elements get double borders. Because NOFRAMES is in the official DTD-files listed as an element, which has %coreattrs; I added it. In principle a modern web browser, which support of framesets is turned off can render the content inside the NOFRAMES element with CSS. At the same main principle a modern web browser, which support of scripting languages is turned off can render the content of NOSCRIPT with CSS.

I got an e-mail, where the writer said, that some user agents (e.g., Amaya) can use LINK relationships (e.g., next/prev) to construct a book form of a document. Then this element can have some kind of presentation with CSS in some user agent. Supporting of elements NOFRAMES, NOSCRIPT and LINK is however quite theoretical. The TM CSS menu tells however, which elements can in theory get CSS.

CSS to the element BR is quite limited (look at however CSS notes 1[S]).

Elements MAP is today partially supported and AREA is not at all supported.

CSS can't make invisible informative HTML-elements as visible. Elements META, PARAM and SCRIPT are not intended to get CSS, because they don't have %coreattrs;. I have not listed such HTML-elements, which CSS can't even in theory affect anything in HTML.

Such embedded elements, which use plug-ins applications or Java-applets cause some limitations. Embedded plug-ins objects and Java-applets are in many browsers always on top. You can't force by using properties position and z-index any HTML-element over those embedded objects. For example it is impossible to use Schockwave Flash animations on the background! You can't affect to the background values of them with CSS. In practice the the only matters, which you can do is to set borders and define box dimensions. If the box is bigger than the embedded object, you can set background properties to the area, which doesn't belong to the embedded object.

Opera browsers have the corresponding problems also with some form control elements (for example INPUT).

I have found that (at least in MS IE 6.0 for Windows) IFRAME, which is also a certain kind of embedded object can be set over such embedded objects, which use plug-ins applications (test with one of my introduction page[S] by clicking some sub-menu - note that by CSS defined borders of the IFRAME remain behind the embedded Flash-object and just the contents of the IFRAME elements can be over the Flash-object).

Only newest Mozilla Gecko based browsers (in my tests Mozilla 1.1a) support the z-index property properly for embedded objects. Ordinary blocks can set over for example Flash-animations.

Note 1. CSS can be used also with XML with the xml-stylesheet declarations (for example <?xml-stylesheet type="text/css" href="CSS_stylesheet.css"?>). Each sub-language follow its own rules, but user agents are free to render all XML-elements as visible by using CSS. If some XML-language supports embedded plug-ins objects, the same limitations concerns also those languages as HTML. In XML the user can define own elements. Then such a CSS-validator, which is also intended to validate in XML-documents used CSS-files can't check, if used CSS-rules are in all respects valid. For example tabl tb {color:blue} is in principle a valid rule because some XML-language can use elements tabl and tb (in practise the validator accepts certain kinds of spelling errors).

W3C: Extensible Markup Language (XML) 1.0 .

Note 2. In principle it is not allowed to use in XML rules like myelement.some-class {} even if MS IE and Opera accept them. In XML should use rules like myelement[class="some-class"] {...}. Unfortunately MS IE 5.0 doesn't understand such rules. In that means MS IE 5.0 use proprietary XML and it needs proprietary style sheets (MS IE 5.0 supports also only proprietary XSLT).

[Top]

Button classifications

Two first button handle systems, how to connect style sheets into the HTML documents. The second handle basic rules and values in CSS2. After them some buttons handle CSS-selectors. I have classified element type selectors using the HTML 4.01 specification into block, inline, form and object element type selectors.

Some pseudo-class and pseudo-element selectors are classified in buttons TM CSS - Generated, because they are especially designed to use with generated contents or languages properties. I list in the button TM CSS - Pseudo only those pseudo-classes or pseudo-elements, which have more general usage. Some of them are listed twice. The usage of pseudo-classes or pseudo-elements resemble normal class or element type selectors, but matching criterion are different. In don't explain this matter in my tutorial site any closer, but you can find additional information from some other sites.

The order of those buttons, which handle CSS-properties is not the same as in the CSS2 specification, because it doesn't fit to this menu. The classification of them base however primary on the CSS2 specification with some exceptions (I don't regard the classification of CSS2 in some matters reasonable). The CSS2 specification handle some matters in several chapters I have listed in some cases properties in other connection as the CSS2 specification. Here is the list, where my classification differ from the specification:

[Top]

Property values

I have not put keyword value inherit to all individual places, because it is common value in CSS2. I don't recommend to use it yet, because it is poorly supported. Listing of properties, which are optional in CSS1 (marked as CSS+) might be some errors, because some of them base on conversations with a member of Webstandards and all of them are not clearly listed in the CSS1 specification.

Opera 3.6x doesn't support just at all optional features, but it support almost all core features of CSS1. From official browsers Opera 4.x+ and MS IE 5.x+ have quite wide CSS2 implementations (MS IE 5.0 for Mac has much better implementation than the Windows version). Quite good implementation is also Netscape 6.1+ and especially in new Mozilla browsers. There is not however any browser, which has full CSS2 implementation. Also MS IE 5.5 is a disappointment at this matter (I have comments[S] in a separate page). Indeed it is quite impossible to define exactly, what is full implementation because some elements cause always limitations. It is in theory possible to define, which is recommended implementation to each elements. CSS2 recommendation doesn't however define this matter.

Opera Software, Netscape, Microsoft, Mozilla, Webstandards.
[Top]

Proprietary or invalid CSS and HTML

MS IE 5.5 use proprietary extensions to CSS. I don't list them in the menu. If you want to use them, install TopStyle (the Light-version is free). Look at my comments to them proprietary extensions from a separate page[S] or from CSS notes 1[S] and CSS notes 2[S]. I have also a special page, which concerns non-standard CSS[S].

TopStyle.

Some browsers allow proprietary syntax like background-image=url(some.gif). Don't use them and use instead of them standard syntaxes, for example background-image: url(some.gif).

Because CSS in not intended to use only with HTML-elements, HTML-browsers don't do incorrect if they support proprietary elements, for example MARQUEE (MS IE) and BLINK (Netscape) and EMBED (used to embed plug-ins applications, for example Schockwave Flash animations). Also old (obsolete to HTML 4.01) elements like LISTING can get if in some browsers. That's why I put them also into selector lists.

The CSS2 specification allows to use proprietary keyword color values and I mention about this matter in the button TM CSS - Color. Remember however that even common used 16 color names (aqua, black, blue, fuchsia, gray, green, lime, #660033, navy, olive, purple, red, silver, teal, white and yellow) are platform dependent. They belong to the 140 Netscape named colors. Netscape and newer Microsoft Internet Explorer browsers know them all, but not Opera version, which knows only 16 common used color names (Opera 5.1x+ supports Netscape's named colors). In order to avoid incompatibility use hexadecimal or RGB-values so, that main color values belongs to the web safe colors palette. I have listed color value keywords[S] with corresponding hexadecimal and RGB-value in a separate page.

Proprietary HTML elements, attributes and attribute values are for Opera like an unknow language, which I doesn't understand anything. A example of using proprietary attributes and attribute values:

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<basefont color="cornflowerblue">

Note. The HTML-Tidy utility works partially as a validator, but it is not a comprehensive validator like the online HTML validator of W3C. It helps to fix most HTML encoding errors, but it doesn't warn all errors in incorrect usage of HTML-attributes. If some attribute belongs to the used HTML specification, it allow to set it to elements, which DTD-files don't allow. It doesn't warn all proprietary attributes. In the previous example it warns only about the proprietary line-height attribute, but not other attributes, which it should also warn if it was a strict HTML-validator.

W3C: HTML validator of W3C.

The proprietary attributes marginheight="0" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" are intended to get the browser render graphics to the top of the page from left to right in Microsoft browsers. This method is used to avoid the so-called browser offset. In order to get equal result to MS IE 5.0 and Opera, it is necessary to define also corresponding CSS properties with same values (indeed Opera reserve always the space for the vertical scroll bar if scroll bars are not defined off in framesets; That's why Opera doesn't render the graphics to the right margin in short pages). Opera needs more CSS than many other browsers (in fact HTML 3.2 designing is doomed to fail, if the author wants to create equal result to Opera and MS browsers). The corresponding CSS with standard values is following:

body {margin-top:0px; margin-bottom:0px;margin-left:0px;color:#6495ed}

HTML-editors like MS Front Page create much proprietary or invalid HTML and DHTML code (one person said, that in FrontPage 2000 is the possibility to use preferences (tools > options), where the application doesn't create proprietary encoding). Proprietary code, which MS IE understands is nonsense to Opera and partially nonsense also to Netscape. Invalid order of elements cause rendering problems. Using proprietary and invalid CSS or HTML you just spoil Opera the possibility to render your site correctly. You might even blame that Opera spoils the presentation of your site! Use proprietary elements, attributes or attribute values only in Intranet solutions, when all use the same browser. I recommend however to learn to create your sites according to HTML 4.01 and CSS2 specifications. If you use in the intranet modern web browsers, you don't need any proprietary encoding (except plug-ins tags).

It is also worth to remember, that Netscape 6.0 doesn't support proprietary DHTML, which use proprietary elements (LAYER and ILAYER). Future browsers might give up such proprietary features, which are supported in older browsers. I have added much proprietary features to the Html all plug-ins. I hope that it helps you to make right choices (you can get it through my Zip-folder).

Eric Krock.

In a way proprietary HTML is also to set elements against the official document type. Applications like Microsoft Word 97 might create invalid HTML like in this example:

<B><P>Microsoft Word 97 might create this kind of invalid HTML. Note, that the element b is outside the element p but in the end of this paragraph the order is opposite.</B></P>

Netscape 6.0/Mozilla is very sensitive to these kinds of errors and can't render CSS properly if the order of elements is incorrect. MS tolerate much invalid HTML and give some level reasonable presentation. If you convert Word-documents into HTML, fix errors with HTML-Tidy. Corel WP 8 doesn't make this kind of errors, but it adds proprietary attributes and unnecessary code. I presume that all office applications make invalid HTML, which should be fixed before used in public web sites.

Remember also to mark accented characters as entities, for example ä = &auml; (used for example in Finnish and Swedish texts) and ç = &ccedil; (a Spanish/Portuguese character) - don't use accented characters (or spaces) in web page names. Even if Windows browsers may render and print documents correctly without them, Mac browsers need them. HTML-Tidy converts accented characters automatic into entities by using the action Copy content in the output window. I recommend not to use special fonts. MS IE 5.0 supports downloaded fonts, but this system is not yet widely implemented. Some fonts don't have all characters, when it is impossible to write for example Finnish or Spanish.

If you generate documents for example with Perl, PHP3, ASP or Java-servlets, take samples. Save some generated pages and test, if they are valid. If you use beside HTML-Kit also commercial applications, try to exchange settings of the application so, that they create valid encoding. Unfortunately many commercial applications can't make proper HTML. It is better to manually write generated code. It is quite easy to write Java with HTML-Kit because it knows most used keywords and it has fine syntax highlighting.

I recommend you to read carefully HTML 4.01 and CSS2 specifications in order to avoid invalid encoding (read also a note concerning proprietary XML of MS IE). Indeed HTML 4.01 implementations in common used browsers are not comprehensive. At least Netscape 4.x, MS IE 5.0 and Opera 4.0 have missing of important features. In fact HTML 4.01 implementations need a comprehensive bug list like CSS. Quite good list is HTML Support History of Brian Wilson (Blooberry), but it doesn't list all newest browsers. Missing features however don't concern primary CSS. Read also hints from Web Design Group (WDG). Unfortunately their CSS site covers only CSS1 and it it not a comprehensive CSS tutorial.

Blooberry: HTML Support History.
WDG: Standards for HTML Authoring for the World Wide Web.
[Top]

Official recommendations and other help pages

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)( @dnainternet.net (add to beginning of the e-mailaddress my name, Tapio Markula, separated with a comma).)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Search this site powered by FreeFind.
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
Help pages has been last edited 09.09.2003