[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]

Visual effects

Topics

Display

Possible specialvalues to the display property are inline , block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption and none.

W3C: CSS2: 9 Visual formatting model, 9.2.5 The 'display' property[Pw].

This is the most powerful tool in CSS. The purpose of this property is to define the basic behavior of element, for example should the element be rendered like block level or inline level elements.

Just the property display is the method to exchange the character of HTML-documents almost into pure markup language like XML. All display-properties are not intended to use in HTML-documents. They are only intended to create HTML 4.0 table model to XML-documents, which don't have predefined table model. The browser may ignore exchanges to the table structure in HTML-documents.

In principle it is possible to exchange drastically the structure of HTML and XML documents by using suitably nested elements. In this example CSS display properties create first table structure from nested elements. Inside the created table CSS create then list element display from P elements. In principle it is possible to exchange table display into list display and opposite. Below is an example of creating table structure with CSS:

*[class~="tables"] {display:table; border:2px blue solid; padding:2px; margin-bottom:5px;} /* this definition require two nested element level, when the outermost can be exchanged into the element table */
*[class~="tables-tr"] {display:table-row} /* exchange the next level element into table row */
*[class~="tables-td"] {display:table-cell; text-align:justify;} /* exchange the next level element into table cell */
td p {display:list-item; padding-left:12px; list-style-type: disc; list-style-image: url(./Css/Kuvat/pallo-vihrea.gif); list-style-position: inside; /* if preceding way is created a table, all P elements are exchanged into list-elements */}

In theory it is possible to create table-like presentations to XML-documents without creating all element levels. The UA should create missing levels automatic. It is necessary to create always table cells, but it is not necessary to create corresponding element to the element TABLE. If there is not table row elements, it is not possible to create parallel table cells. Cells are then always under each others.

Only empty elements are problematic. It is not possible to remove in HTML the formatting features of some empty elements except removing them from use by the display-property value none. Neither it can make empty elements of XML formatting codes. It is possible to exchange with a pseudo-way the order of elements. The real order is not exchanged, but if some element is removed and another is revealed, it is as if an exchange of the place of elements ([M][S][Pw]).

With display:none can smart hide information about using CSS. In the following way the text is visible only to browsers, which don't support CSS - why newer browsers should read this text:

<DIV style="display: none;"> If you see this text, you browser doesn't support HTML 4.0 style definitions and CSS-files. Get a newer browser, if you want to see my pages as I have design them (you don't lose however any important information with old browsers). My pages are best viewed with MS IE 5.x+, Opera 5.x+, Netscape 6.x+ or corresponding other browsers (like Mozilla and NeoPlanet).</DIV>

This method can be compared to HTML-comments. The basic difference is, that it is not necessary to use comment tag in the document body (like ). The hiding of elements can be fulfilled by using external style sheets. Changes can be also dynamic, when it is possible to create visual effects.

Browser-specific notes:

  1. Only Mozilla Gecko and Opera 4.x+ browsers can give table presentation for XML-documents with CSS. Look at following pages and and an image:

    I made also an other example[S]. MS IE shows the pages messy, but Opera 4.x+ and Mozilla Gecko browsers as clear tables.

  2. Netscape 6.x can fulfil most values but not all. I tested display:compact and display:run-in, which don't work in Netscape 6.2.1, but they work in Opera 4.x+.

  1. MS IE 5.0 for Windows can create basic block and inline structure (display:block or display:inline) - and hide some area from the screen (display:none).

  2. They work also in MS IE 4.x for Windows and Netscape 4.x browsers, but display:block doesn't create a block but it works just as the opposite of display:none at the same way as display:inline.

  3. MS IE 6.0 for Windows supports all CSS1 level display types + CSS3 level display:inline-block, which is not supported in other browsers. I has a DTD-dependent special usage, which I refer in an extra page[S].

  4. It is possible to play with display properties if they are connected into dynamic pseudo classes and at that way create visual effects. Then they correspond simple scripts. Play with my images with MS IE 4.x+, Mozilla Gecko or Opera 7.x+ browsers ([M][S][Pw]). Because Opera 4.x-6.x don't support dynamic changes of the display property they don't work in those Opera browsers.

[Top]

Visibility

New features in CSS2 is also visibility that means, is the object on the screen visible or not (visibility:hidden; visibility:visible). According to CSS2 specification the difference between display:none and visibility:hidden is, that visibility:hidden takes the space of hidden element, but display:none means the same as nothing! By using visibility:hidden it is possible to create hidden formatting, which however works today well only in MS browsers. This property can be used with dynamic pseudo-classes to create dynamic structural exchanges.

Browser-specific notes:

  1. The visibility property doesn't work in Netscape 4.x always correctly.

  2. MS IE and (in most cases) Mozilla Gecko browsers render elements, which have visibility:visible as visible even if they are inside elements, which have visibility:hidden, which is the correct. Opera hides always these kinds of elements and Mozilla Gecko browsers if position:fixed has been used (a test page[S]).

  3. Compare properties display and visibility with MS IE 5.x+, Mozilla Gecko or Opera 7.x+ browsers ([M][S][Pw]). These changes don't work in older Opera browsers.


John Allsop: Page Layout([Pw].

[Top]

DHTML

So-called DHTML (Dynamic Hyper Text Markup Language) means dynamic changes to the visual structure of the document, which are made by CSS + JavaScript/ ECMAScript encoding (in most cases they have been done by changing the values of the visibility property). The most used solutions are dynamic menus. I use them today and I made an extra page, which handles creating of dynamic menus[S].

I don't handle very thoroughly DHTML/DOM in this site. I don' handle either some other matters, which concerns CSS, which I refer in the last page. Compare the points of views of this page to the possibilities of How to set CSS for table elements[S].

[Top]

   
Copyright 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.
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!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004