[XHTML+XML] html and body size

[bipède]

Hi,

Is it possible in Mozilla / Firefox / Netscape to fix minimum size for
html and/or body element in a "real" XHTML (mime application/xhtml+xml)
page so that when there is few text in a page the background color fill
the window and when content exeed the window size the body resize to
include all the content.

For now I can't figure out how to do this, if I use height:100%;
width:100% the size of html and body is *always* 100% even if there is
exeeding content and the background color just stop at 100% of the
window size. In fact the html and body width seems to be always 100%: a
big image exeed the background even if I set width:auto, it's really
disconcerting.

min-width and min-height doesn't seems to be taken into account.

thanks in advance
any solution would be welcome

[Gus Richter]

bipède wrote:

Hi,

Is it possible in Mozilla / Firefox / Netscape to fix minimum size for
html and/or body element in a "real" XHTML (mime application/xhtml+xml)
page so that when there is few text in a page the background color fill
the window and when content exeed the window size the body resize to
include all the content.

For now I can't figure out how to do this, if I use height:100%;
width:100% the size of html and body is *always* 100% even if there is
exeeding content and the background color just stop at 100% of the
window size. In fact the html and body width seems to be always 100%: a
big image exeed the background even if I set width:auto, it's really
disconcerting.

min-width and min-height doesn't seems to be taken into account.

thanks in advance
any solution would be welcome

Have you tried placing everything inside a wrapper div and repeating the
background request in it as well?

--
Gus

[Toby Miller]

It does work in Firefox, but I've been unable to get it to work in
Safari. This is as far as I was able to get:

<style type="text/css">

html,
body {
height:100%;
}
body {
margin:0;
padding:0;
}
div#content {
height:100%;
min-height:100%;
background-color:pink;
}

</style>

Then put your content within:

<div id="content">Your content here</div>

If you come up with the Safari workaround I'd love to see it.

-tm

[Pawel Knapik]

bipède napisał(a):

Hi,

Is it possible in Mozilla / Firefox / Netscape to fix minimum size for
html and/or body element in a "real" XHTML (mime application/xhtml+xml)
page so that when there is few text in a page the background color fill
the window and when content exeed the window size the body resize to
include all the content.

For now I can't figure out how to do this, if I use height:100%;
width:100% the size of html and body is *always* 100% even if there is
exeeding content and the background color just stop at 100% of the
window size. In fact the html and body width seems to be always 100%: a
big image exeed the background even if I set width:auto, it's really
disconcerting.

min-width and min-height doesn't seems to be taken into account.

if you use
html, body { height:100%; min-height:100%; }
you will get 100% because you defined it. the above means
"exactly 100% and no less than 100%".

try
html, body { height:auto; min-height:100%; }
and should work.

if you want to support IE (by content negotiation) you can
use a simple "hack":
html, body { height:auto !important; height:100%;
min-height:100%; }

[bipède]

bipède wrote:

Hi,

Is it possible in Mozilla / Firefox / Netscape to fix minimum size for
html and/or body element in a "real" XHTML (mime application/xhtml+xml)
page so that when there is few text in a page the background color fill
the window and when content exeed the window size the body resize to
include all the content.

For now I can't figure out how to do this, if I use height:100%;
width:100% the size of html and body is *always* 100% even if there is
exeeding content and the background color just stop at 100% of the
window size. In fact the html and body width seems to be always 100%: a
big image exeed the background even if I set width:auto, it's really
disconcerting.

min-width and min-height doesn't seems to be taken into account.

thanks in advance
any solution would be welcome

Thanks for all your answers,

I have found the work arround, in fact in real XHTML with netscape /
mozilla / firefox if you want to have a background color or a repeated
background image that always fill the window you should set it for
'html' tag and not 'body' tag. Here's the solution I use :

html {
padding:0;
margin:0;
background:#f4f4f4 url('/images/fond-colonne.png') repeat-y left;
}

It was simple but it seems that no one have found it until now (nothing
on internet about it). Other solutions I tried dont work.

[Steve Pugh]

bipède wrote:

I have found the work arround, in fact in real XHTML with netscape /
mozilla / firefox if you want to have a background color or a repeated
background image that always fill the window you should set it for
'html' tag and not 'body' tag.

It was simple but it seems that no one have found it until now (nothing
on internet about it).

Hardly, it's documented in the CSS specification.

"The background of the root element becomes the background of the
canvas and covers the entire canvas, anchored at the same point as it
would be if it was painted only for the root element itself. The root
element does not paint this background again.

For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For HTML
documents whose root HTML element has computed values of 'transparent'
for 'background-color' and 'none' for 'background-image', user agents
must instead use the computed value of those properties from that HTML
element's first BODY element child when painting backgrounds for the
canvas, and must not paint a background for that BODY element. This
does not apply to XHTML documents."
- http://www.w3.org/TR/CSS21/colors.html#q2

I think the replies to your post focussed on the height: 100% issue
rather than the background issue because that seemed to be what you
were asking about.

Steve