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

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]
Table of topic groups > Front page of CSS-guide > Guide pages > 8. How to set CSS for backgrounds and borders > Special problems > Dimensions of block boxes (section 5b/5)

Dimensions of block boxes

It is in many situation reasonable to define height and width properties to block boxes, which have borders. This has some problems.

The first problem might be due because of the fact that in HTML specifications width and height attributes have been counted sometimes differently as in in CSS2. In CSS previous mentioned properties are always content dimensions, which don't include possible padding, border or margin values. Sometimes in HTML width and height attributes include paddings and borders - the dimensions of the whole block box.

The content width means a reservation box for some concrete content, for example and image, which has certain width. For example into a block, which has width:200px should fit following elements:

<IMG src="..." alt="..." width="200" border="0">
<DIV style="width:200px; border-width:0; padding:0; margin:0">...<DIV>
W3C: CSS2: 8 Box model, 8.1 Box dimensions[Pw], 10.2 Content width: the 'width' property[Pw].
Other sites: Web Design group: CSS Properties[Pw].

This dimension problem can partially solve by using an extra element level or extra element levels. The outer element level defines the total dimensions and to the inner block is defined margin, padding and border properties. At this way at least the width is the same in all common used new browsers. In tables this can be done so, that table cells don't have padding values an the content of the cells is always inside some block element. In tables it is possible to give padding with the cellpadding attribute, which can override with CSS.

Below is a code example of both cases ([M][S][Pw] - in the end of the page is a new test block):

td, th, div.containerBlock {padding:0; margin:0; border-width:0; width:200px} /* padding:0 eliminates the effect of cellspacing="10" */
div.containerBlock div, th div, td div {margin:10px; padding:10px; border:10px solid black}

<div class="containerBlock"><div>Content.</div></div>...

<table summary="A content example" cellspacing="10">
<tr><td><div>Content.</div></td></tr>
</table>

CSS3 offer the possibility to choose the best algorithm (I handle this matter in the page, which handles problems of the specification[S]).

 

The second problem is that how strict dimensions should be interpreted. With HTML attributes defined tables dimensions are the minimum value. At this way can't do in ordinary blocks. If the content doesn't fit to the given value, rest of the content goes over the borders - in worst case over the other content.

In CSS2 this problem can be solved with min-height, max-height, min-width and max-width. The alternative way is to define overflow:scroll or overflow:auto, when the content, which doesn't fit inside the block can be scrolled.

Instead of huge quantity of layers, it is simpler to set basic CSS for most browser so, that pages work relative well without JavaScript. Browser-specific CSS is just for browsers, which really need it (look at as a model the source code of this page). The need of special CSS is all browsers different because browsers have different bugs.

In addition of matters, which I have explained, users might have toolbars on the right and left. If they have 800x600 monitor, the usable width of the viewport (window) is about 730 pixel.

My recommendations:

  1. Don't give padding and border properties for elements, which you want to set exact width values (one pixel wide borders are in most cases harmless).

  2. If you use a DIV-element as the main container block set for child-elements horizontal margins (it is necessary to set for tables in order to set in nested tables margins only for the outermost table levels).

  3. If you want that the main content is in the center of the page in all browsers define for the main container block margin-left:auto; margin-right:auto and add around it a CENTER element without any dimensions.

  4. Avoid using exact vertical dimensions. If you want to set for elements minimum height do it at the following way:

    div.someClass {height:...px} /* for such browsers, which interpret height as minimum heights */
    div[class="someClass"] {height:auto !important; min-height:...px} /* for such browsers, which interpret height and min-height as different properties */

  5. Define the width for the content so that it fits to the 800x600 display. In the example below the width has been set for a DIV element as the basic block:

    body, html {padding:0; margin:0}
    div.basicBlock {margin:10px; width:710px} /* the formula is 730 pixel - margin for the main container block */
    p, h1, h2, ... {margin-left:20px; margin-right:20px} /* it is not necessary to set dimensions for other blocks, just margins */

Browser-specific notes:

  1. MS IE for Windows browsers calculate the width and height properties incorrectly (they include also possible paddings and borders) until MS IE 6.0 for Windows, if the browser doesn't work in so-called. standard-compliant mode[S]. MS IE 6.0 for Windows like MS IE 5.x for Mac has the "DTD-switch". MS IE 6.0 works quite correct except concerning the element TABLE and the value 100% doesn't work. For example body.CssSite {width:100%; border-width:0; margin:0; padding:0} cause sometimes the horizontal scroll bar even if it should not cause it! In MS IE 5.x for Mac the DTD-switch works properly also in tables (I handle dimension problems of tables in the page 10[S]).

    Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.

  2. MS IE 5.x Windows counts the box dimension more incorrect, if the block box and the margins to the block box are set with percentage values. I tested margin:33%; width:67%. MS IE 5.x Windows counts the width of the block according the available space, when the left margin is taken off, not from the content width of the parent element. This calculation style might cause to Opera and Netscape browsers horizontal scroll bars, if pages are optimized according to MS IE 5.x Windows -versions. I took two screen captures:

  1. Dimension problems can try to solve by using attribute selectors, which MS IE doesn't support. these properties for generic block level elements. (compare box dimensions to the "measurer sticks" besides the blocks - they show the correct dimensions ([M][S][Pw]):

    div.nav, div.nav2 {padding:10px; border: 10px solid black} /* note, that in principle borders and padding values should increase the size of the whole block box! */
    div.nav {height:180px; width:180px;} /* height works as the minimum height of the whole block box in MS IE even if it should not do at that way; If the browser doesn't support attribute selectors, the box dimensions should be 220x220 pixel */
    div[class="nav"] {height:auto; min-height:160px; max-width:160px;} /* because the content doesn't necessary fit to the previous height value for Opera 4.x+ and Netscape 6.x+ have been given new properties with an attribute selector, which MS IE doesn't understand; height:auto eliminates the effect of height:180px; Note, that I have taken off the padding values from width and height dimensions! */
    div.nav2 {height:160px; width:160px}     /* a comparison block, which should have equal dimensions */

    I got following results, which following screen capture images shows:

    • Mozilla 0.6[S] - exactly correct.
    • Opera 5.01[S] - renders horizontal dimensions correct, but the min-height is the same as the minimum height of the whole block box; It behaves normally like in MS IE 5.x Windows the property height.
    • MS IE 5.5[S] - total dimensions of both block boxes are too small. With the used DTD MS IE 5.0 for Mac and MS IE 6.0 for Windows browsers should render blocks, which are on the right side of the main test blocks correct.

  1. Widths and heights, which use percentage values don't work neither properly with positioned elements (I handle problems of absolute positioned elements in the page 11[S]).

  2. MS IE interprets height loose and to MS browsers height means the minimum height, which can be exceeded, if the content doesn't fit to the given value. But Opera and Netscape 6.x interpret them in ordinary blocks strict.

  3. Properties min-height, max-height, min-width and max-width work for generic block elements only in Opera 4.x+, Mozilla Gecko, Konqueror (Linux) and (on the base of a screen capture) Safari (Mac). Because I want to that the user can use this site in a narrow window, I don't have given fixed width value. Fixed width values are in my mind harmful. I hope, that MS IE could some day support max-width etc., because they are the ideal way to control the dimensions of basic structures.

  4. overflow:scroll and overflow:auto don't work in Opera 6.x browsers. They work at least but only in MS IE 4.x+, Mozilla Gecko and Opera 7.x+ browsers.

  5. The height property has also a problem, which I have explained, when I handled inline and block level elements.

  6. Mozilla Gecko browsers cause a problem, which I handle in the page Lists[S].

  7. It is possible to create for MS IE browsers by using JavaScript encoding functionality, which resembles max-width (I explain this matter in another extra page[S]).

  1. When I tested this with percentage values (div.doc {width:99%}) with MS IE 5.0, the browsers doesn't rendered all content if images don't have pixel values.

  2. Because with to the BODY and HTML don't work in all browsers, it is recommended to use a DIV (or a TABLE) element as the basic block box.

  3. Because browsers might have default padding or margin values to the element BODY, the padding and margin values must be defined.

  4. In the last note of the previous section I handled margin:auto problems.

The next page handles lists. It is also important to know, how to define CSS to list elements in avoid to serious problems.

[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