[Top]
More advice for the full screen mode.
   
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.
 
 
Search:
[Help]
To the normal page

11. What is the visual formatting model of CSS2

Topics

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

The content as a one big page

Common

This page concerns in fact the How to put CSS into Web pages of CSS2 (CSS2 9-11). I handle the most powerful ways to exchange the presentation of pages.

Visible or hidden?

W3C: CSS2: 9 How to put CSS into Web pages[Pw], 10 How to put CSS into Web pages details[Pw].

Indeed in XML-documents can use even more powerful XSL language, which can use CSS-properties as parts of the whole system. In order to implement certain CSS-properties is fundamental point in creating presentation to XML-documents. Indeed CSS2 has some missing features (look at the page What other special features CSS has[S]).

[Top]

Div + float

The property float moves elements to the right or left - elements as if "float" to those directions. At this way defined elements should be at the same horizontal level as elements without the property float. The heights of floated elements should not affect the height of the parent element. All elements including normally inline level elements should behave as block level elements. Together with the property float is commonly used the property clear. In the page mentioned below are some examples, which use these properties:

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Below is an example, which use these properties: ([M][S][Pw]):

img.icon
{float: left; /* the image floats on the left - the another value is right */
clear: left;} /* the left side of the image is "cleaned" from other elements (even if there could be space for many floating element in the same row, all floating elements, are now in own rows) - other values are left and all (there is nothing on the right or left) */

Float is sensible to use with the common block element DIV by creating the basic structure into frame or table free documents. DIV-elements could be made "floating" block elements, which include link lists. The text would be written besides the floating box and there would be no need to use tables into basic formatting into frame free pages (strictly thought to use tables as creating the basic structure is misuse of them).

Floating elements or tables?

In fact it is possible to create the basic structure dynamic by dividing the content into floating sections. In 640x480 and 800x600 screen is only one column on the screen, but in 1024x768 or larger screen can be two or more columns (an example page[S] - use as wide screen as you can).

This idea can be applied in navigation frames, which don't have exact defined width values. I have used the property float with the element IFRAME, which has main navigation links.

CSS2 gives the possibility to set to block elements maximum and minimum width and height values. I used frames, because they make the same as max-width CSS-property. Frames have however disadvantages, why I don't use them anymore except in exceptional cases.

I give you an example, which is intended to use in pages, which have BODY class CssSite. The basic text is inside DIV-elements:

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033; padding:10px;}

After defining the basic layout element, the author defines two nested blocks as in the example below ([M][S][Pw]):

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033;padding:10px;}
body.CssSite div div {border:1px solid #660033; margin:0 10px 0 0; float:left; width:70px; height:200px; clear:left;} /* in this block, which is inside the previous block can place links; Next blocks can be simple one level blocks like paragraphs, because it is not necessary to present links more than once */

These kinds of blocks could be in many situations much more better than tables, which have fixed width value. There would not be a horizontal scroll bar in narrow windows, but the width of the text would however be under the control of the author.

Browser-specific notes:

  1. The functionality of float and clear properties are quite bad in Netscape 4.x. If several elements have in the same row several floating elements browser set them to the same "pile". Go through the CSS1 test suite of W3C concerning the float property.

    W3C: CSS1 Test Suite: 5.5.25 float[Pw].

  2. MS IE 4.x for Windows can't put a large quantity of floated elements into several rows. It might be more sensible to use tables, if the author doesn't want to create free scaling text. If you want flexible width values, use percentage values.

  3. If the basic structure base on floating elements some browsers put randomly unnecessary scroll bars. The system works relative well at least in Opera 4.x+, MS IE 5.5+ and Mozilla Gecko Windows browsers (presumably also in many Mac and Linux browsers).

  4. If ordinary inline level or block level elements are set to float, they need at least the width property. Otherwise browsers give them totally different width values.

  5. The height of floating elements might increase in some MS IE browsers also the height of the container (parent) element. This matter is fixed at least in MS IE 6.0 for Windows.

  1. In some browser floated elements goes a little bit downward, not directly to the left or right, when the position of floated elements is not the same in all browsers.

  2. The property clear doesn't work correctly at least in MS IE 5.x for Windows[S] and Netscape 6.1 browsers. In MS IE 4.x for Windows the property clear cause additional line breaks (also float might also cause them randomly).

  3. Netscape 4.x or older browser don't IFRAME elements. For such browsers, which don't support the IFRAME element I have defined alternative links.

  4. Max-width works on the base of my tests only in Opera 4.x+, Mozilla Gecko and Konqueror (Linux) browsers (on the base of a screen capture also in Safari (Mac)) browsers.

  5. Because MS IE doesn't support the display (I handle it later) property at XML-level, the only possibility to create flexible structure to XML-documents is to use the float property. It is remarkable to remember, that DIV + float looks completely different in browsers, which don't support CSS. Fast downloaded How to set CSS for table elements[S] are in that means backward compatible, but they work in MS IE only in (X)HTML-documents. In general the another way to replace frames is to use the position property, which I handle next.

[Top]

Position model of CSS2

Topics

Common about positioning

The CSS2 has special position model. In this model position:static means ordinary positioning as if any position-related properties has not been given. The only reasonable usage of this value is exceptionally to take off the effects of other positioning values. Other positioning types (relative, absolute and fixed) gives the possibility to create layered elements. Positioned elements establish also a new containing block for the subsequent layout.

In order to control the stack level of layered elements it is necessary to use the z-index property. How bigger the numeric value is, the higher level the element is compare to other element, which have also z-index or don't have at all it (element, which have z-index:3 is positioned higher than element, which have z-index:1 and so on; if layered elements are inside a positioned element, z-index values are relative to each others and relative to other elements they have the z-index the same value as their parent element).

W3C: CSS2: 9 How to put CSS into Web pages[Pw], 10 How to put CSS into Web pages details[Pw]

When elements have position:relative the positions of elements have been calculated from the normal (static) positions of the elements. The most used positioning type is position:absolute. The positions of at this way positioned elements are normally calculated according to the the initial containing block, which is the root element. Concerning relative and absolute positioned elements the positions of positioned ancestor elements have impact for elements, which has these positioning types because the calculation of positions starts from the nearest positioned ancestor element. That's why absolute positioned elements are not each time positioned according to the root element. The positions of absolute positioned element should calculate from the padding edges of the container element when the margin and border properties of the container block have effects to the positions but the padding property is ignored.

Elements, which have position:fixed have been positioned according to the viewport (window). Because fixed positioned element has always the same starting-point depart from other positioning types positions of other elements have no impact to the positions of fixed positioned elements. Fixed positioned elements which are descendants of fixed positioned elements start always the calculation of the positioning of the subsequent layout from the very beginning.

Absolute and fixed positioned element are entirely taken off from the normal flow of elements. That's why width and height values for absolute/ fixed positioned descendants of static positioned ancestors don't change the height and width of the static positioned ancestors. The dimensions of absolute/ fixed positioned element can't be set (by using percentage values) on the basis of the dimensions of the static positioned parent element.

<body>
<div style="position:static"><div style="position:absolute; height:500px; width:500px; top:0; left:0"</div></div>
<!-- the height of the static positioned element is zero --> <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0"</div></div>
<!-- the height and width values of the absolute positioned element should be in this case calculated on the base of the HTML element --> -->

Absolute positioned elements

Below is an example of a typical usage of absolute positioned elements ([M][S][Pw]):

...
html, body {margin:0; padding:0; border-width:0}
...

<DIV style="position:absolute; top:10px; left:10px; z-index:5; width:400px;">
... </DIV>
<IMG src="./Taulut/koneet.gif" style="position:absolute; left:20px; top:50px; z-index:3">
<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; left:100px; top:20px;z-index:4">
<DIV style="position:absolute; top:290px; left:10px; z-index:5; width:400px;">
<DIV style="border:1px solid black; padding: 5px">...
...</DIV></DIV>

My recommendations:

  1. Positions have always been calculated from the top-left corner of the Web-page by using left and right properties. Both previos mentioned properties have always been set.

  2. The property z-index has been set for every positioned elements layer and if necessary also for the other elements.

  3. For container elements and for the element BODY properties margin-top, margin-left, padding-top, padding-left, border-left-width and border-top-width has been set to zero. Using of padding-right etc. leaves dimension problems[S]. The best result can be achieved if borders etc. have been set only for non-positioned descendants of positioned ancestors.

  4. Positioned elements have always pixel defined height and width properties, which have set so so that possible contents always fit inside positioned elements without setting the overflow property.

  5. Position:absolute works most reliable if it is given to direct child-elements of the BODY element. If nested positioned elements have been user inner element should fit inside outer elements.

  6. Absolute positioned elements should not be used in pages, which are horizontally scalable at the way that the content below might become unreadable.

  7. Avoid to set any element above form control elements and embedded visual objects.

  8. Don't position table cells.

Browser-specific notes concering absolute positioned elements:

  1. According to Opera Software nested solutions (for example <div style="position:absolute; top:50px;left:50px"> ... <div style="position:absolute; top:20px;left:20px"> ... </div></div>) work in MS IE 5.0 incorrectly.

    Opera Software: Web specifications supported in Opera 5 - the details.

    Indeed I coudn't verify this claim concerning Windows browsers. Instead I found that MS IE 5.x for Mac takes incorrectly account margins for the non-positioned ancestor element(s). I found also that Opera 4.x-5.x calculate sometimes nested positioned elements incorrectly ignoring positions of outer positioned elements when positions of inner positioned elements have been calculated. Concerning Opera 6.x I found that position:absolute + nested relative positioned elements positioning didn't work for innest elements.

  2. The bottom property works incorrectly in all browsers. If any containing block has not been set browsers position the element in the bottom of the viewport in a situation, where the page has not been scrolled. right doesn't work at all in all position:absolute supporting browsers.

  3. In MS IE 4.x for Windows positioning doesn't work if the starting point of the positioned element is totally outside of the positioned container element.

  1. Browsers set the width and height differently if they are undefined. In some Opera 7.x browsers the width and height are zero, if they are not explicit defined. Menus might be collapsed.

  2. MS IE 5.x for Mac and Mozilla Gecko browsers can't position table cells.

  3. With percentage values defined width and height properties don't work correctly in MS IE and Opera browsers. MS IE calculates positioned elements on the base of parent element even if the parent element is static positioned. If the parent element has not exact height value, the value is the height of one row of text. Opera takes the height from static positioned parent element (if the parent element doesn't have the height property the height would be the height of the viewport subtracted the space, which Opera reserves for the vertical scrollbar). Opera 7.x calculates the width correctly from the base of the HTML element but other according to the viewport in situations, which resemble example below:

    html {width:400px; width:400px}...
    <body>
    <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0; background-color:yellow"</div></div>

  1. Only Mozilla Gecko browsers calculate positions according to the padding edges of the HTML element. MS IE 5.x+ and Opera 7.0 Beta 1 for Windows browsers ignore the margin. MS IE 5.x for Mac takes sometimes account paddings for the HTML element. Older Opera browsers ignore both margin and borders like MS IE 4.x for Windows (the latter browser ignores totally these properties). I made a test case[S] for it. In ordinary situations Opera 4.x-6.x calculates positioned elements incorretly according to the border edges.

  2. According to an e-mail MS IE 5.0 for Mac starts in some cases calculating from BODY element. In a case padding-left:100px for the BODY element moved the absolute positioned element 100px to the right (a test page[S], where the menu should be on the top-left edge of the page).

  1. Opera needs both horizontal and vertical values of them (MS IE use as the default value the top-left edge of the element).

  2. MS IE 5.x+ for Windows (except MS IE 6.0 in the standard-compliant mode[S]) needs height values for TD elements, which are inside positioned elements. Mozilla Gecko browsers need in some cases the height property for positioned DIV elements. MS IE 4.x for Windows seems to need for positioned elements always both height and width properties.

  3. The positioning doesn't always work in Netscape 4.x browsers. In these kinds of situations it is necessary to define corresponding HTML-attributes for LAYER or ILAYER elements (look at an example from the page, which handles dynamic menus[S]). If positioned elements are inside cells of full width tables all properties for positioned elements don't work correctly.

  4. The problem in almost all new browsers is that the z-index doesn't work properly with embedded plug-ins object and/or with form control elements. In in Opera (until 6.x series) this problem concerns both of them and in Konqueror 3.1 form control elements. MS IE has problem with the SELECT-element. These broblems have almost been fixed in newest Mozilla Gecko based browsers. Indeed if layers, which have been set above an embedded object have background-color:transparent the background-color of the parent element of the embedded object shines through and layers crop a piece from the embedded object.

  5. All CSS2 supporting browsers don't support all values for the overflow property. I mention this problem further, when I handle position:fixed related issues.


[Top]

Kiinteästi asemoidut elementit

Navigointielementtien suhteen paras vaihtoehto voisi olla position:fixed, jolla voi emuloida kehysten käyttöä. Navigoinnin suhteen etuna on se, että pysyy paikoillaan, vaikka asiakirjan muuta sisältöä rullataan. Mikäli kaikki linkit eivät mahdu samaan lohkoon niille voi periaatteessa määritellä overflow:auto, jolloin loppuja linkkejä voi rullata.

Kun systeemin laittaa taulukkosolun (TD) sisälle, voidaan luoda hyvin taaksepäin yhteensopivia tiedostoja (esimerkkisivu[S]). Systeemille on aina syytä määrittää oma lohko elementtiä DIV käyttäen, esim. ([M][S][Pw]):

div.jokuLuokka {overflow:auto; width:100px; height:150px; position:fixed; left:10px; top:10px}

Jos ajattelemme sivustojen tekemistä idealistiselta näkökannalta, BODY-elementin kanssa ei ole vättämätöntä käyttää mitään lapsielementtiä dokumentin visuaalisen perusrakenteen luomiseksi. Sen sijaan että käytetään juurielementtiä HTML visuaalisena perus rakenne-elementtinä käytetään elementtiä BODY ja kiinteä navigointielementti muodostaa oman kerroksen (layer). Juurielementti HTML toimii visuaalisena pohjaelementtinä, kuten seuraavassa esimerkissä:

html {background-color:#603} /* dokumentilla on kaksitasoinen tausta */
body.Class {max-width:600px; margin:auto; background-color: white} /* BODY toimii visuaalisena perus rakenne-elementtinä */
#one, #one2, one3 {z-index:4; text-align:right; border:1px solid black; background-color:#ffc; font-size:11px; padding:1px 2px 1px 0px;} /* navigointielementtien eri variaatioden yhteiset ominaisuudet */
#one2 {position:fixed; bottom:0px; right:0px; width:102px; height:27px;} /* #one2 käyttää DIV elementtiä kiinteänä navigointielementtinä selaimet, jotka eivät osaa toteuttaa CSS:ää näyttävät sen sivun lopussa alavasemmalla */

Systeemi toimii periaatteessa jopa niin, että määrittää max-width ominaisuus elementille HTML, jolloin HTML toimii myös dokumentin perus rakenne-elementtinä (kuvakaappaus[S]):

html {padding:0; margin:auto; max-width:500px; background-color:red}

Ratkaisussa ei tarvita taulukoita, ei kehyksiä eikä sisäkkäisiä DIV elementtejä, mutta dokumentin näkyvä rakenne on silti kontrolloitu.

Ajatus käyttää kiinteää navigointielementtiä ei ole uusi. Dave Ragget ehdotti HTML 3.0 Draft:ssa (1995), että BODY elementin sisällä voitaisiin käyttää paikallaan pysyvää BANNER elementtiä (ks. myös HTML 3.0, elementti BODY[S]):

The BANNER element is used for a banner section which appears at the top of the window and doesn't scroll with window contents. This can be used for corporate logos, copyright statements and disclaimers, as well as customized navigation/search controls.
Suositukseni:

  1. Jos haluat antaa kaikille kiinteätä asemointia tukeville selaimille jonkin elementin pysyvän paikoillaan, määrittele vain suhteellisen yksinkertaisia kokonaisuuksia. Varmista, että elementit ovat sopivilla paikoilla selaimilla, jotka eivät tue kiinteätä asemointia.

  2. Jos asemoit kiinteiden elementtien sisällä muita elementtejä, käytä vain asemointityyppiä position:relative.

  3. Jos luot monimutkaisia dynaamisia ratkaisuja käytä niitä vain sellaisten selainten kanssa, jotka pystyvät toteuttamaan monimutkaiset rakenteet. Luo tarvittaessa selainkohtaisia tiedostoja.

  4. Määritä mahdolliset dynaamiset valikot vain vasempaan yläkulmaan suhteellisen kapealle alueelle siten, että päävalikko ei mene asiasisällön päälle.

Selainkohtaisia huomautuksia:

  1. Tuntemistani selaimista position:fixed että overflow:auto toimivat vain MS IE 5.0+ Mac, Mozilla 0.6+, Netscape 6.1+ ja Opera 7.x+ selaimissa. Molemmat toimivat todennäköisesti myös Konqueror (Linux) ja Safari (Mac) selaimissa (en ole niissä testannut overflow-ominaisuutta; Konquerorissa olen testannut position:fixed ja Safari näyttäisi erään kuvakaappauksen perusteella sitä tukevan). MS IE Mac overflow:auto ei toimi kunnolla. Käsittelen toisessa yhteydessä visibility ominaisuutta koskevaa ongelmaa. On syytä tiedostaa, että position:fixed toimii lähes moitteitta vain sangen uusista Mozilla Gecko Opera 7.0 Beta 2 selaimista lähtien.

  2. MS IE 5.5+ Windows ja Netscape 6.0x tukevat overflow:auto mutta eivät position:fixed. Sivulla 8[S] on tähän asiaan liittyvä linkki testisivulle ja toteutuksista annetut kommentit. Opera 4.x-6.x:ssä ei toimi overflow:auto. Operalla on myös eräitä pienempiä virheitä, joita käsittelen eräällä lla[S].

  3. position:fixed ei toimi eräiden upotettujen objektien kanssa Opera 5.x ja MS IE 5.0 Mac selaimissa (IFRAME rullautuu sivun mukana; sama asia koskee ainakin Operan kohdalla myös APPLET, EMBED ja OBJECT elementtien avulla upotettuja objekteja).

  1. Jos position:fixed asemoitujen elementtien jälkeläiset on määritelty position:absolute avulla jotkut Mozilla Gecko selaimet laskevat absoluuttisesti asemoitujen elementtien paikan ikään kuin ne eivät olisi kiinteästi määriteltyjen elementtien sisällä (käsittelen tätä asiaa tarkemmin eräällä sivulla[S]). Konqueror 3.1:llä ongelmana on se, että absoluuttisesti määritellyt elementit jäävät kiinteästi määriteltyjen elementtien alle (z-index ei toimi oikein).

  2. Jos käytetään ominaisuutta bottom on ehdottomasti määriteltävä ominaisuutta height, jotta position:fixed toimii Operalla kuten pitäisi.

  3. max-width toimii elementin HTML kanssa vain CSS2:ta tukevissa Opera selaimissa. MS IE selaimilla on koko dokumenttia ajatellen jonkinlainen width-ominaisuus, on välttämätöntä lisätä DIV elementti ja käyttää sitä dokumentin perusrakenteen luomiseen. MS IE:lle leveys voi olla kiinteä, mutta Opera 4.x+:lle, Mozilla Gecko, Konqueror ja Safari selaimilla sen arvo voi olla joustava, kun määrittelee CSS:n seuraavalla tavalla:

    div.perusRakenne {width:550px;}
    div[class="perusRakenne"] {min-width:200px; max-width:550px; width:auto}     /* MS IE ei lue tätä sääntöä; width:auto eliminoi width:550px vaikutuksen */

  1. Kiinteästi asemoitujen elementtien sijaan voi käyttää JavaScript-koodauksella toteutettuja "kelluvia" elementtejä, jotka pienellä viivellä asettuvat paikoilleen. Toimivuus on kuitenkin jossakin määrin huonompi kuin kiinteästi asemoiduilla elementeillä. Käsittelen tällaisia elementterjä eräällä lla[S].

  2. Eräät Mozilla selaimet tulkitsevat katselukanavan eri tavalla. Operassa vierityspalkkeja ei lasketa katselukanavaan, mutta joissakin Mozilla selaimissa ne lasketaan. Tein asiasta myös erityisen mallisivun[S], josta minulla on muutamia kuvakaappauksia:

    • Opera 5.01[S] - ok.
    • Mozilla 0.7[S] - sivu on madalletussa ikkunassa, jolloin tulee vaakatason siirtymä (korjattu Mozilla 0.9:ssä).

  3. MS IE 5.0 Mac versiossa ei toimi edellisellä esimerkkisivulla margin:auto, mikä näkyy kuvakaappauksesta[S]. Mac IE:llä monimutkaiset dynaamiset valikot eivät toimi kiinteästi asemoituina.

  4. Mitä itse tiedän vain Opera 7.x, Mozilla 0.9-1.1 / Netscape 6.1-7.0 Konqueror + todennäköisesti Safari osaa käsitellä kunnolla monimutkaisia dynaamisia valikoita (tällöinkin muistettava, että position:fixed + position:fixed eikä position:fixed + position:absolute ei käytetä).

[Top]

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]