CSS-guide, Extra pages: E What kind of non-standard (proprietary) CSS browsers support: Examples of illegal definitions

	Table of topic groups > Front page of CSS-guide > Extra pages > E What kind of non-standard (proprietary) CSS browsers support > Examples of illegal definitions (section 6/6)

Sections of page:

First section

Previous section

Examples of illegal definitions

Topics

Illegal CSS definitions
Hints to avoid problems
Illegal HTML 4.0 Transitional loose definitions - includes critique towards HTML 4.0 and CSS!
Other validator services

Illegal CSS definitions

I have used and met much illegal definitions, which doesn't work.

<DIV style="{width:400;}">; works with MS IE and Opera, but not in Mozilla and is against standards, should be without {} like this <DIV style="width:400;"> (read however the Footnote 1).
BODY.classname {LINK=red;}, BODY.classname {LINK:red;} or BODY.classname {LINK-COLOR:RED} might work in some browsers. Opera and Mozilla doesn't accept any CSS definition, where is used =; must use always : and all these definition are un-standard. Instead of these definitions should use .classname A:link {color: red; text-decoration: none;}
In CSS2 it is not allowed to put style definitions to HTML like <HTML class="stylesheet1"> (read however the Footnote 2 ).

I put a list of tiny errors, which I have done and you can avoid. First of all, use the CSS validator of W3C as I have done (a member of Webstandards ask me to use it - and he was right - I have made tiny errors, which were difficult to find). In this list is also my recommendations, how stylesheets could work better in problematic situations.

Class=BLACK is for Opera and Mozilla different as CLASS=black but MS IE 5.0 handles them as the same. Class names must in practise handle as case sensitive even if CSS2 specifications of W3C 4.1.3 says:
All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
Pseudo-elements and pseudo-class names are case-insensitive.
Even if according to specifications it is not necessary to put termination tag  to paragraphs I recommend to put it every time. CSS-definitions don't work in certain browsers, if there is not the termination tag.
MS IE 4.x allows spelling errors like text-aling: left;, text-align; left. Be careful and don't rely, if some definition works with MS IE 4.x, because it allows spelling errors. But MS IE 5.0 don't allow spelling errors like text-aling: left - in that matter it is closer to Mozilla 5.0 Gecko, which doesn't tolerate at all spelling errors.
Remember to put after individual property the sign :, not ;. Sign ; is the separation mark between different properties! This is valid text-align: justify; and this incorrect text-align; justify: - extremely easy to make errors and MS IE allows this error text-align; justify; Missing ; cause that the definition ends - rest definitions are ignored in all browsers.
Remember to put ; after @import url(stylesheet.css); - MS IE might handle this definition without it but Mozilla keeps it invalid and all definition are ignored if the ; mark is missing. Remember also to put all @import ... to the beginning of the CSS definition and don't put them inside blocks.
Put units (not needed in height and width values). MS IE use in font pixel as default value, but Mozilla ignores font-size:12; if it does have unit like font-size:12px;. Also margins and padding needs necessary units (except the value 0).
Remember to put termination to { - if } is missing, all CSS interpreters try to combine this value to the next definition. The situation is quite the same, if you miss the } in a javascript, but unlike in javasripts, this missing character doesn't cause the whole system to crash - only two definitions works incorrectly! Browsers announce these kinds of errors in javascripts, but unfortunately not in CSS-errors - that's why you should use validator or must be extremely careful!
A.links: link {color:red} - don't work, because there is extra space, must put without any space after A.links like A.links:link {color:red}.
Font family names, which contain spaces, must be enclosed with quote, like font-family: "Times New Roman", serif; (it gives recommendations only, when you use warnings).
If there is no padding and margin values, Opera and Mozilla 5.0 displays the border tightly "glued" to the text and borders are separated from the frame borders according to the value of FRAME in the FRAMESET (in this case <Frame marginwidth="10" ...>. Designers must always put padding and margin values to these kind of CSS-definitions if they want that they are displayed at the same way with Opera 3.60, Mozilla 5.0 and MS IE 4.x/5.0:
BODY.classname {... padding-top: 0px; padding-right: 10px; padding-left: 10px; padding-bottom: 0px; margin: 0px; ... }
Pseudo class hover might cause problems as it did to me. But in fact this was my error. I have put a:hover up in the list, which W3C warns:
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the color property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
To avoid this problem, you can use also class only to hover, which has the same class name to BODY like BODY.tausta-navigoinnit {...} ... *.tausta-navigoinnit A:hover {color: #DCD2D3; text-decoration: none; background-color:#706A6A;}. To Mozilla A:active and A:focus are different even if MS IE 5.0 displays them as the same. In Mozilla A:active works between onMouseDown and onMouseUp events and disappears after releasing mouse button and only A:focus definition stays. Use always this order:
A {text-decoration: none} /* bare anchors - necessary for Opera, because otherwise anchors are underlined*/ A:link {color: #3f3f3f; text-decoration: underline;} A:visited {color: green; text-decoration: underline; } A:hover {color: red; text-decoration: none} A:active {color: green; text-decoration: none; background-color: yellow;} A:focus {color: green; text-decoration: none; background-color: yellow;} /*necessary to Mozilla if the meaning is to keep the last mouse click visible*/
When Mozilla applies hover, active and focus to images, it make it strict according standardars, A: hover is one line height, not the height of the image - in most cases only part of the image got the new background color. Image needs special definition in order to get the same result as MS IE 5.0, which just apply hover directly to IMG combing A and IMG in this case together. Use this kind of definitions:
A.orange:hover {color: #F85B07; background:#DCD2D3; border:none;} /* border none and background value, because there might be definition to them */ A.orange:hover IMG {color: #F85B07; background:#F85B07 url(.gif)} A.orange:active {color: #F85B07; background:#DCD2D3; border:none;} A.orange:active IMG {color: #F85B07; background:#F85B07 url(.gif); border: maroon thin solid;} A.orange:focus {color: #F85B07; background:#DCD2D3; border:none;} A.orange:focus IMG {color: #F85B07; background:#F85B07 url(.gif); border: maroon thin solid;}
If you want to get borders to inline elements with MS IE, you must define height-value like . But remember - the vertical alignment is in MS IE incorrect and this is only a trick, because definition height should not be applied at all in this situation. MS IE does have bad bugs in displaying inline elements! It just creates totally un-standard way behaving box, which is something between inline and block boxes, but however closer to block-level boxes as inline boxes. MS IE tries to keep it in a single line and if it must make linebreaks, MS IE creates a rectangular block box like using blocklevel boxes with DIV and doesn't allow other text into the same row..
I you want to use same CSS also with XML or XHTML documents, use always lower case letters and use quotation marks ("") marks like class="black". Using HTML elements is XML or XHTML documents, use also lower case letter in element (like  and and element definitions like p {...} - for example this page is a well-formed XHTML-document (view the source and you can see, how it must be formed)

If you want to make some CSS definitions to Netscape 4.0x, I give you special hints (some other hints - no return link to this page):

Use linked stylesheets using @import url(linked_stylesheet.css); and put all definitions, which works incorrectly to it (Netscape 4.0x can't read @import and those definitions, which are linked at this way are ignored).
Netscape 4.0x reads incorrectly relative references in CSS-files according to the HTML document, not according CSS document. To avoid background image problems,
- Put CSS files and HTML files to the same directory level. This doesn't mean, that all files must be in the same directory - just at the same level.
  - The easiest way is to few pages to put all text document in the main directory.
  - If you have many pages, the main directory leaves almost empty (there is only index.html) and all documents are in the next subdirectory level - this is the easiest way to organize CSS and HTML files
- If CSS files are in subdirectories, relative references are made according to the main directory. If you have an image "image.gif" , which is in the same subdirectory as your CSS-file, you should not refer in a CSS-file to it directly like this BODY{background: white url(image.gif); ...}
  Put the reference starting from the root directory "BODY {background: white url(../Subdirectory/image.gif); ...}". If the image is in the second level subdirectory make this way: "BODY {background: white url(../Subdirectory/ Second_level_subdirectory/image.gif); ...}" instead of "BODY {background: white url(./Second_level_subdirectory/image.gif);...}".
  Why? Using this method the relative subdirectory is to all HTML-files the same directory (= root directory). CSS files works also, if you have a file in ./Subdirectory2/file_in_another_subdirectory.html. If you use the shortest address, the CSS file works only to the files, which are in the same directory.

Illegal HTML 4.0 Transitional loose definitions

I'm not a professional to understand all W3C doc type definitions (and I'm sure that there is only few people, who understands them properly!), but I recommend to use HTML 4.0 Transitional, not the strict definition, where all HTML 3.2 level definitions (like ALIGN, bgcolor="white" TEXT="#3f3f3f" LINK="#3f3f3f" VLINK="#2f2f2f", FONT FACE) are removed (they are defined with CSS) and then supporting transitional documents concerning appearance of documents is extremely limited. In my mind HTML 3.2 align-definition are in many cases faster to define and also older browsers understand them. HTML 3.2 align definition can also override with CSS ( is justified to CSS understanding browsers). It is quite easy to make proper documents with this doc type definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

This is the strict definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

strict.dtd cause inflexibility to element P - in many cases it is more reasonable to use the align attribute.

All hints in this page concerns however the loose dtd. My designing principle is however that all definitions, which are harmful to the full functionality of CSS should not be used. Following definition limits the functionality of CSS and that's why I can't recommend it:

This works well also with CSS even if it could be defined also by using CSS:

There is however a trick to make font definitions to HTML 3.2 and 4.0 compliant without losing the flexibility of CSS. This works to Opera 3.60, MS IE 5.0 and Mozilla 5.0: Welcome, because in the css definition is .font-color {color:maroon;font-size:20px;}. The rule means that class, which have the name font-color is applied to all elements. This system brings more compatibility between HTML 3.2 and 4.0 style font definitions and all commercial page designer likes this!^{Footnote 3}. This is in fact valid according to DTD, because FONT accept core attributes - look at the DTD:

"id ID #IMPLMS IED class CDATA #IMPLMS IED style %StyleSheet; #IMPLMS IED title %Text; #IMPLMS IED"> ... %coreattrs; %i18n; size CDATA #IMPLMS IED color %Color; #IMPLMS IED face CDATA #IMPLMS IED>

CSS definitions don't tell about it, because it is against strict HTML principles! But remember, that browsers handles them a little bit different ways. Opera don't take font-size values from CSS if it is defined like . To use FONT, B, I is not recommend to use and they don't belong to the strict DTD. HTML 4.0 strict base on a little bit too academic page design philosophy!

If you want to use your HTML page in some as parts of XHTML or XML files, use always lower case letters in tags, attributes and css-files and use always termination tags to p and li and mark empty tags to img, br, hr like - HTML TIDY automate this process except in some "empty" element (empty means in this case that the tag doesn't have normal termination tag). Remember: making XHTML and XML files must be much more careful as making ordinary HTML pages!

Illegal HTML 4.0 Transitional loose definitions

Most common errors using HTML 4.0 loose, which W3C validator give error messages:

Missing !DOCTYPE. It is impossible to use W3C validation service without it!
Missing HEAD element <TITLE></TITLE>
Missing termination tags in tables elements like </TR> - Too common! MS IE is not sensitive to these, but Opera doesn't allow so much errors as other browsers
Other missing termination tags like </CENTER>, </UL>, </BLOCKQUOTE> (also  should be used even if many writes don't put it, because they said, that it is not anymore needed).
Using inline elements like block level elements - I have made most errors here. Don't put outside paragraphs or other block level elements these:
- CODE, B, I, TT + some other inline font or phrase definitions
- SPAN
Nesting stand alone block elements. Don't use nested following elements:
- H1-H6 (can have inline fontstyles like STRONG)
- ADDRESS + PRE
- DL, MENU and DIR type lists (OL and UL can be nested)
Missing ALT-text from images (height and width values are not necessary, but I recommend to use them, because browsers works faster if images has exact values).
Missing quotation marks on un-paired quotation marks. Following definitions needs quotation marks: "+1","-1","90%" (used in font definitions and determining table width values)

Opera and MS IE 5.0 puts often horizontal scroll bar - it is for these browsers much more common than MS MS IE 4.x and Netscape 4.0x. There is however a trick, which helps in many cases. I have used width="100%", which might cause horizontal scroll bar, but using width="99%" it disappears.

There is however some situations, where to slipper from standards is sensible. At least this one:

All browsers can't show in image maps individual alt texts, if the image itself have also an ALT-text. In order to get the validator of W3C to accept the left navigation frame of these pages, I put the alt text to the image (arrows). But in that image map individual alt texts don't work with Netscape (works however with MS IE 5.0). All other left navigation frames don't have ALT text in the image itself but only individual alt texts in map definitions and they have this format:
<IMG SRC="..." ... USEMAP="#imagemap"> <MAP NAME="imagemap"> <AREA SHAPE="RECT" COORDS="3,2,17,26" HREF="..." ALT="... ">

Other validator services

Netmechanic

Also some commercial companies offer validator services, like Netmechanic

Other sites:
Netmechanic.

I have validates these pages with W3C and I Netmechanic complained many errors from a file.

Some comments to Netmechanic:

It understand only certain type of DTD definition. This is okay for it: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, but it doesn't allow to put file name "http://www.w3.org/TR/REC-html40/loose.dtd" after it - Incorrect - the file name is permitted. The robot has invalid list of accepted !DOCTYPE definitions!
Doesn't accept empty titles (<TITLE></TITLE>) - in a way Netmechanic is right, but it should not handle it as erroneous HTML but it should give a comment. My comment: Because of search engines, it is sometimes sensible to try to avoid them to find pages. Using empty titles and this definition <META name=robots content=NOINDEX>,in meta tags, robots probably don't find pages. These are however matters of readiness - not of HTML validation!
Don't accept empty definitions. I have put in a file ACTION="" - again in a way Netmechanic is right again, but I don't need any value - I admit, that this was only a trick to cheat the validator of WC3 - Netmechanic doesn't allow cheating, but it should give only a comment!.
Doesn't accept other empty codes like . This is worth to complain.
But I found also other some real functionality errors in addition pf the first error. This is correct TITLE='Art box' and Netmechanic complained incorrectly!
6
= = = = = = = = = = = = = = = = = = = = = ^Error: "BOX'" is not a supported attribute for "A".

And it doesn't keep this valid either:
Title='"The heart" of my pages -partially in English'
Single quotation marks and also nested quotation marks are permitted!

It is easy to put so, that also Netmechanic regards them valid, but the result of those kinds of validation services should react with reservations. However - guite good validating after fixing some errors.

Web Site garage

Other sites:
Web Site garage.

Some comments:

These pages are according to that service technically excellent (Dead Link, Spelling, HTML Design), but Load time got estimation "good". Excellent from the Web Site Garage, because these pages are really flawless - no incorrect error messages.
Checks also readiness and link popularity and these pages have estimation "good" of Readiness and "poor" of Link Popularity. The link popularity depends on you, who visit in these pages - could you add links to these pages!.
Ranks also browser compatibility, which in some pages was fair, but this page got good. I use tags, which older browsers don't support. Gives list tags, which I have used and which are not supported by some older browsers. I can't do anything for that matter and there is no harm of unsupported tags to older browsers - the request, that pages should look out similar to Netscape 3.x/MS IE3.x and newer browsers is impossible to fulfil.

Topics

Footnote 1. Also the style attribute (style="") includes an embedded declaration. Some applications accept style="{}", which tells much better, that style attributes includes embedded declarations. But this is against the normal HTML attribute syntax, and Netscape 4.x accepts only style="". According to David Baron this is correct. But if I think about this matter deeper, I disagree. It is only an agreement, that the dominating syntax is normal HTML attribute syntax. Today style-attribute has the same kind of syntax as so-called javasripts, which use also ";" as the separation mark like onClick="uusikkunaa(); if(browser) nayta(10, 'b')"

There is also a terminological problem, which concens the "!important rule' - in my mind it is misleading to call it as a rule. Read another another footnote from my CSS-teaching pages ([S]). (Return)

Footnote 2. You can find from CSS1 definitions (4.5 The canvas following, but this doesn't work in any browser and today it should not work:

This rule allows: <HTML style="background: url(http://style.com/marble.png)">
<BODY style="background: red">
In the example above, the canvas will be covered with "marble". The background of the BODY element (which may or may not fully cover the canvas) will be red.

In my mind HTML should have the possibility to define styles to <HTML> like in the example of CSS1 and just now there is needless limitation in the CSS2 spesificattion

In fact many of the problems in displaying HTML and BODY are derived too loose definitions in CSS1, which Håkon Wium Lie and his collaborators had done:

The canvas is the part of the UA's drawing surface onto which documents are rendered. No structural element of a document corresponds to the canvas, and this raises two issues when formatting a document:

from where should the dimensions of the canvas be set?

when the document doesn't cover the whole canvas, how should this area be rendered?

A reasonable answer to the first question is that the initial size of the canvas is based on the window size, but CSS1 leaves this issue for the UA to decide. It is also reasonable to expect the UA to change the canvas size when the window is resized, but this is also outside the scope of CSS1.

HTML extensions have set a precedent for the second question: attributes on the BODY element set the background of the whole canvas. To support designers' expectations, CSS1 introduces a special rule to find the canvas background:

If the background value of the HTML element is different from transparent then use it, else use the background value of the BODY element. If the resulting value is transparent, the rendering is undefined.

Microsoft and Opera has made different conclusion and this kind of over loose definition cause fragmentation. Also CSS2 in my mind too loose concerning displaying borders in container elements HTML and BODY.

Read my suggestion. The canvas is the most import matter to remark, because just the canvas is the space, which all CSS definitions should be rendered! (Return)

Footnote 3. I have discussed about this matter. Commercial web designer use HTML 3.2 font definitions just for the compatibility and they are not ready to use only CSS based definitions, which doesn't work with Netscape 3.x. My solution is a compromise. There is more need to use class-definitions than using strict HTML, but font values can be exchanged from linked CSS-files. (Return)

Sections of page:

First section

Previous section

Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)( tapio.markula@nic.fi)

Not into the public use without my permission. If you want to use my pages at some way read the copyrights.

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.

CSS-guide has been last edited 07.08.2004

Examples of illegal definitions

Topics

Illegal CSS definitions

Hints to avoid problems

Illegal HTML 4.0 Transitional loose definitions

Other validator services

Netmechanic

Some comments to Netmechanic:

Web Site garage

Some comments: