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

Special problems

Topics

Inline and block level elements

CSS2 defines quite complex rules for different element types. This matter cause many problems.

Ordinary non-replaced inline level element (for example STRONG) should not get width and height properties. Instead replaced elements, for example IMG, can get them. Non-replaced text elements can get the line-height property and they can affect to the line height also by the font-size property because vertical margin and padding-values should not affect to vertical space, which elements should take. Concerning ordinary positioning and line height values replaced inline elements should behave like non-replaced inline elements.

Possible border and background properties for non-replaced elements may cause the situation that rows overlap each others. With replaced elements positive margin, padding and border values should increase the line height so that they always fit to the line.

Vertical margins normally collapse, which cause for example that the same bottom and top margin value for two block level elements cause single single margin value, not double margin.

W3C: CSS1 Test Suite: sec42.htm and sec44.htm; CSS2: 8.3.1 Collapsing margins.

In HTML 3.2 encoding the positioning of inline and block elements are poor defined by using align and valign attributes. Sometimes they define the positioning of inline elements and other contents inside some block element. Sometimes they define the position of the block element itself in relation to the surrounding parent element.

Concerning horizontal positioning these two matters are totally separated from each others. The property text-align concerns all inline-level contents, which are inside block elements. Then text-align:center means the centralization on inline elements and inline-level content. This property should not affect to the positioning of block-level elements and it has no effect to inline-level elements.

The definition margin:auto should cause centralization of block-level elements in the horizontal direction but not vertically.

The vertical alignment has the property vertical-align (possible values are: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positive and negative percent or pixel units (the latter doesn't belong to the CSS1 values). It affects normally inside block boxes to the vertical alignment of inline level elements. Inside table cells it has the same task as the valign attribute (only values top, middle and bottom can be used). By setting for an individual cell/entire table some height and a cell the valign attribute or the vertical-align property it is possible to center elements vertically. If for the BODY and TABLE elements have been set as the value of the height 100% or a little bit less the element can approximately set vertically to the center of the page. Indeed the CSS2 specification itself[S] has the problem that vertical centering doesn't work for any block level element.

Below is an example of a block element with some comments ([M][S][Pw]):

p.special
{border:1p solid blue;
text-indent: 3em; /* indents the first row */
margin:10px; /* this is related to the containing block (normally it is the parent element, but not in cases, where elements are absolute or fixed positioned (I handle at that way positioned elements in the page 11[S])), which have the paragraph; Negative values are allowed; Remember also shorthand properties to margin and padding! */
padding:10px; /* padding to the text, which is inside the paragraph; negative values are not allowed */
text-align:justify; /* horizontal alignment of the text; Other values are: left; center and right */
vertical-align: top;
/* this value isn't inherited and it affects to the respective vertical alignment of text and other elements in blocks */
font: normal small-caps 120%/120% fantasy;

Authors may use inline elements incorrectly and put inside inline elements block level elements. Be careful to use correctly inline elements if you want that all blocks are displayed properly. Don't put block level elements inside inline level elements (I handle the usage of elements also in an extra page[S]).

The only elements, which according to (X)HTML specifications you can use both as inline and block level elements are INS and DEL. But you can't used them at the same time as inline and block-level elements.

Browser-specific notes:

  1. If inline level elements have been used outside blocks MS IE shows CSS for those kinds of elements in most cases like for blocks. But setting CSS-properties for new Netscape/ Mozilla Gecko browsers must be careful. I have found that incorrect usage of inline elements cause extra line breaks and CSS-properties don't work as they are intended.

  2. Implementations vertical-align vary very much. I recommend to test especially the functionality in different browsers using the CSS1 Test Suite. It works relative well at least in new Mozilla Gecko, Opera 4.x+ and MS IE 5.5+ for Windows browsers.

  3. I don't recommend to use to the TD element vertical-align:middle, because it cause problems to some browsers. Vertical centering using tables doesn't work in Opera 7.2x browsers.

  1. Because Mozilla Gecko browsers give for images (IMG) in the standard mode[S] according to the CSS2-specification as default vertical-aling:baseline, lonely images inside table cells have empty space around them. It is possible to get rid of this problem in some cases by defining vertical-aling:bottom for images. Because other browsers use different default value, this problem is not in other browsers.

  2. MS IE 4.x-5.0 for Windows have a serious implementation deficiency in inline elements, because borders don't in normal cases work with non-replaced inline elements. If the author set the height property, the browsers renders borders but incorrectly (look some example from the error page[S][Pw]; You can look also some example from the page, which handles illegal definitions and hints to avoid problems[S][Pw]).

    MS IE 5.5+ works correctly, if the height property is not defined. The property height works with ordinary inline level elements in MS IE 6.0 for Windows in the standard-compliant mode[S] only if they have display:inline-block, when the browser behaves according to CSS3 (I handle the display property in the page 11[S]).

  1. Netscape 4.x renders borders but the same kind of error behavior as MS IE 5.5 with the height property.

  2. text-align affects in MS IE 4.x for Windows the positioning of the table elements. text-indent might cause extra left marginals with MS IE 5.0 for Windows. Text-align:justify worked in my tests correctly only MS IE 5.x+ for Windows and new Mozilla Gecko browsers (Opera makes some errors, if block elements include some inline elements, which don't fit into the same line, but normally it works fine). Netscape 4.x can display only in very simple documents.

  3. Browsers implement at various ways collapsing margins incorrectly. I have a test case for this[S].

  4. margin:auto work according to my tests properly only in Opera 4.x+, new Mozilla Gecko, MS IE 6.0 for Windows and Konqueror for Linux browsers (and on the base of a screen capture also in Safari for Mac). In order to center horizontally block level elements in elder MS IE browsers it is reasonable to set one CENTER arond them. Because some Opera and Mozilla Gecko browsers might ignore the effect of the CENTER element, margin-left:auto; margin-right:auto is also necessary.

[Top]