Most web designers, when faced with task of limiting the size of the page content within browser window, encapsulate the content of the page within additional block elements resulting in structures like following:
<body>
<div id="page">
<!--Page Content -->>
</div>
</body>
What they fail to realize is that they already have two block elements at their disposable to provide the required styling in majority of cases. These elements are <html> and <body>.
Consider the task of restricting the page width for improved readablity, while providing enough flexibility within a reasonable range. Let's start with the <html> block that is the root of the document presentation and examine application of styles in two major browser platforms: "the forefront of standard compliance" Gecko (rv:1.4b was used) and "what else can I try to make it work" MS Internet Explorer (Version: 6.0.2800.1106CO).
The common block element properties, such as background, border, margin and padding can be defined for the <html> element. These are renderened as expected in Gecko, except the background is applied to the margin area as well. IE does not render the margin and places the scroll bar inside the border, which leads to "frame-like" appearance. The following declaration results in the same rendering by both browsers:
html
{ background: #ccf;
padding: 1em;
}
Now the box properties can be applied to the body element to position it within the html element. For the simple fixed width, centered layout the following declaration provides the desired rendering:
body
{ position: relative;
background: #fff;
border: solid 1px #f00;
margin: 1em auto;
padding: 3em;
width: 30em;
}
When the window width is less that the declared <body> element width and horizontal scroll bar appears, Gecko does not render the right <html> padding and <body> margin. Also, the setting of <body> element position property to relative makes it containg box for the absolutely positioned elements within the body. If omitted, the absolutely positioned elements within the <body> are rendered relative to the <html> element, which in most cases results in unwanted effects.
Flexibilty of <body> element widht in Gecko is easily achieved by defining min-width and max-width properties. In IE the proprietary expression() construct can be used to achieve similar results.
Test page can be found at: <!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/htmlandbodystyling.html">http://www.vladdy.net/Demos/htmlandbodystyling.html</a><!-- m -->
I would appreciate comments how it works/degrades in other browsers.IE 5.5 displays as described - a "frame" look - has a rose colored border of about 1 or 2px and the horizontal scroll bar is inside the border.
NS 4.7 displays a 500 x 1300 box with a reddish border about 100px from the top, 50px from the bottom and 10px from the left. There is a 50px margin around all the text inside the box.
NS 7 displays a centered 600 x 1400 box about 40px from the top with a reddish border, with 40px also at the bottom. The rest of the body is lavender.
HTH
Gil
<body>
<div id="page">
<!--Page Content -->>
</div>
</body>
What they fail to realize is that they already have two block elements at their disposable to provide the required styling in majority of cases. These elements are <html> and <body>.
Consider the task of restricting the page width for improved readablity, while providing enough flexibility within a reasonable range. Let's start with the <html> block that is the root of the document presentation and examine application of styles in two major browser platforms: "the forefront of standard compliance" Gecko (rv:1.4b was used) and "what else can I try to make it work" MS Internet Explorer (Version: 6.0.2800.1106CO).
The common block element properties, such as background, border, margin and padding can be defined for the <html> element. These are renderened as expected in Gecko, except the background is applied to the margin area as well. IE does not render the margin and places the scroll bar inside the border, which leads to "frame-like" appearance. The following declaration results in the same rendering by both browsers:
html
{ background: #ccf;
padding: 1em;
}
Now the box properties can be applied to the body element to position it within the html element. For the simple fixed width, centered layout the following declaration provides the desired rendering:
body
{ position: relative;
background: #fff;
border: solid 1px #f00;
margin: 1em auto;
padding: 3em;
width: 30em;
}
When the window width is less that the declared <body> element width and horizontal scroll bar appears, Gecko does not render the right <html> padding and <body> margin. Also, the setting of <body> element position property to relative makes it containg box for the absolutely positioned elements within the body. If omitted, the absolutely positioned elements within the <body> are rendered relative to the <html> element, which in most cases results in unwanted effects.
Flexibilty of <body> element widht in Gecko is easily achieved by defining min-width and max-width properties. In IE the proprietary expression() construct can be used to achieve similar results.
Test page can be found at: <!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/htmlandbodystyling.html">http://www.vladdy.net/Demos/htmlandbodystyling.html</a><!-- m -->
I would appreciate comments how it works/degrades in other browsers.IE 5.5 displays as described - a "frame" look - has a rose colored border of about 1 or 2px and the horizontal scroll bar is inside the border.
NS 4.7 displays a 500 x 1300 box with a reddish border about 100px from the top, 50px from the bottom and 10px from the left. There is a 50px margin around all the text inside the box.
NS 7 displays a centered 600 x 1400 box about 40px from the top with a reddish border, with 40px also at the bottom. The rest of the body is lavender.
HTH
Gil