[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

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.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideGuide pages > 10.  How to set CSS for table elements (introsection)

10. How to set CSS for table elements

Topics

I have divided this page into sections, which handle following topics:

The content as a one big page

Common

Tables have been used creating basic structures of Web-pages, which they are not originally intended. CSS works better, if the basic structure is base not on tables. It is much easier to crate basic structure using frames, which works well with relative old browsers (for example Netscape 2.x and MS IE 3.02).

Floating elements or tables?

If you want to create frame free pages and you keep the percentage of old browsers is relative small, there is an alternative solution. It is easier to create the basic structure using the common block element DIV, which presentation is defined with CSS. I handle them in the page 11. What is the visual formatting model of CSS2[S][Pw]. Applying CSS for tables browsers have some generic problems.

Browser-specific notes:

  1. In order to format the text inside tables is problematic, because horizontal alignment using CSS-properties cause also with certain browsers the horizontal alignment of the whole table. For example the CSS-property text-align:justify affect in MS IE 4.0 for Windows incorrect to the place of the table. Table {text-align:justify;} and table {text-align:left;} move the table to the left even if it has set into center using element CENTER or corresponding attribute inside the element TABLE. If you define text-align to child-elements (for example table.right td {text-align:right}), the behavior is ok.

  2. Netscape 4.x can't inherit CSS text-related properties definitions onto tables. Even MS IE 5.x and at least some versions of Opera 5.x have partially the same problem. It is easy to solve this problem with IE and Netscape 4.x by defining element TD. Because Opera 3.6x doesn't support properties to element TD, there is a need to define the element TABLE, when properties are different compared to the element BODY.

  1. To solve easy way these problems, I recommend to work to this way:

    body, table,th, td, p, ol, ul, blockquote /* define here common text-style properties and you can avoid all inheritance problems with Netscape 4.x and MS IE 4.0/5.0; There might be also other elements, which you must add into this list, because I don't have used all possible elements in my documents */
    {font-size: small;
    font-family: Verdana, Arial, Helvetica; }

    body {background: #dcd2d3 url(background_image.gif);}/* these properties concerns only the element body */
    text-align:justify; /* Opera inherit this property to tables; Define another time some descendant elements, if you need different properties */
[Top]