A Border Around Everything

[Vigil]

I am trying to put a 7px border around a page. If the contents don't fill
up the viewport, then the border must appear all around the viewport. If
the page is larger than the viewport, then the border must wrap around the
contents. Both should result in the border around the complete page, no
matter the size, so that none of the bgcolor bleeds outside of it (ie. you
can never see or scroll outside of the border). I would have thought this
would be more common than it is, but anyway...

I am trying to keep to using a doctype, preferably XHTML strict, and I'm
trying to find a method that works in all major browsers. I have tried
styling the html, body, and a 'wrapper' div, and I have tried making each
side of the border a thin div as well. I have tried various ways including
display:table on the body. Some work, some don't - with a doctype.

I have tried wrapping the entire contents in a 100% width and height 1x1
table, and this is the best solution I have found thus far. However, it
only works if the browser is in quirks mode (no doctype specified). If I
specify any doctype using this method, it only works in MSIE 5.

I have read http://www.quirksmode.org/css/100percheight.html but the
author doesn't seem to have put much effort into his 'working' examples -
put a large table in there and it bleeds over the bottom border. Also, I'm
not sure about trusting someone's advice when he chooses to go for the
quirks mode solution - it completely excludes one browser, whereas
strict+body+html+100% is only buggy in one minorer (sp? :-)) browser. And
where are his gecko-based results?

Is there a best method of doing this that doesn't require to be in quirks
mode and doesn't require hacking for specific browsers?

I am testing on Opera 7.23, Firebird 0.7, MSIE 6 (latest updates), MSIE
5.01 (this IS the version that comes with Win98, right?). I have yet to
test with Netscape 4.x.

Cheers.

--

..

[Neal]

"Vigil" <[e-mail]> wrote in message
news:pa****************************@privacy.net...

I am trying to put a 7px border around a page. If the contents don't fill
up the viewport, then the border must appear all around the viewport. If
the page is larger than the viewport, then the border must wrap around the
contents. Both should result in the border around the complete page, no
matter the size, so that none of the bgcolor bleeds outside of it (ie. you
can never see or scroll outside of the border). I would have thought this
would be more common than it is, but anyway...

I am trying to keep to using a doctype, preferably XHTML strict, and I'm
trying to find a method that works in all major browsers. I have tried
styling the html, body, and a 'wrapper' div, and I have tried making each
side of the border a thin div as well. I have tried various ways including
display:table on the body. Some work, some don't - with a doctype.

I have tried wrapping the entire contents in a 100% width and height 1x1
table, and this is the best solution I have found thus far. However, it
only works if the browser is in quirks mode (no doctype specified). If I
specify any doctype using this method, it only works in MSIE 5.

I have read http://www.quirksmode.org/css/100percheight.html but the
author doesn't seem to have put much effort into his 'working' examples -
put a large table in there and it bleeds over the bottom border. Also, I'm
not sure about trusting someone's advice when he chooses to go for the
quirks mode solution - it completely excludes one browser, whereas
strict+body+html+100% is only buggy in one minorer (sp? :-)) browser. And
where are his gecko-based results?

Is there a best method of doing this that doesn't require to be in quirks
mode and doesn't require hacking for specific browsers?

I am testing on Opera 7.23, Firebird 0.7, MSIE 6 (latest updates), MSIE
5.01 (this IS the version that comes with Win98, right?). I have yet to
test with Netscape 4.x.

I've tried this, and I could never get it to work. Problem is, if the
element doesn't descend deep enough, the border won't get to the bottom. The
only way you can do this is to force it, say with a 750-pixel-high
transparent image along one side.

[MH]

> I am trying to put a 7px border around a page.

I have tried ...a 'wrapper' div, and I have tried making each
side of the border a thin div as well.

Did you try superimposing two backgrounds, one slightly smaller (7px) than
the other?
e.g. in the . CSS you would write;
DIV.backbig {
margin : 0px;
border : 0px;
padding : 7px;
background : #1C1887; <!-- dark blue -->
}
DIV.backsmall {
border : 7px;
padding : 7px;
background : #CCFFFF; <!-- light blue -->
}

and in the .page.htm itself you would write
<DIV class="backbig">
<DIV class="backsmall">
this will produce a dark blue border around a light blue background.

--------
MH

[Vigil]

With doctype XHTML stricht, it only works in MSIE 5.

On Tue, 23 Dec 2003 16:36:27 +0100, MH wrote:

this will produce a dark blue border around a light blue background.

--

..

[Vigil]

The 1x1 table only works in all tested browsers - except NN4 - if I
specify the doctype as HTML 3.2, but I'd prefer to use XHTML strict.

--

..

[MH]

> > this will produce a dark blue border around a light blue background.

With doctype XHTML stricht, it only works in MSIE 5.

OK, I did not try that, I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
and it works in Opera 7 and IE6
------
MH

[Vigil]

On Tue, 23 Dec 2003 17:59:50 +0100, MH wrote:

OK, I did not try that, I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> and it
works in Opera 7 and IE6

Hmm, that's odd - if you put the
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" in the DOCTYPE,
it b0rks on everything but MSIE 5...

I guess I can just forget about it working in NN4.

--

..

[Mark Parnell]

On Tue, 23 Dec 2003 17:59:50 +0100, MH declared in
comp.infosystems.www.authoring.html:

With doctype XHTML stricht, it only works in MSIE 5.

OK, I did not try that, I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
and it works in Opera 7 and IE6

That's because that Doctype triggers Quirks mode. To trigger so-called
"Standards" mode, you need to include the URI (doesn't trigger Standards
mode in Gecko browsers, e.g. Mozilla), or use the Strict DTD. See
http://gutfeldt.ch/matthias/articles/doctypeswitch.html for a good overview
of doctype switching.
http://gutfeldt.ch/matthias/articles...tch/table.html may be more
directly relevant to the current thread.

--
Mark Parnell
http://www.clarkecomputers.com.au

[Vigil]

On Tue, 23 Dec 2003 10:03:21 -0500, Neal wrote:

I've tried this, and I could never get it to work.

With more experimentation I have gotten it to work, provided the content
isn't inside an absolutely positioned div. I can have a 1x1 table
surrounding the lot. I can put as little or as much content inside and the
table will expand with the amount of content. However, if that content is
inside a position:absolute div - even if 'position' is the only attribute
the div has - the table will not expand as the content grows.

--

..

[Eric Bohlman]

Vigil <[e-mail]> wrote in
news:pa****************************@privacy.net:

With more experimentation I have gotten it to work, provided the
content isn't inside an absolutely positioned div. I can have a 1x1
table surrounding the lot. I can put as little or as much content
inside and the table will expand with the amount of content. However,
if that content is inside a position:absolute div - even if 'position'
is the only attribute the div has - the table will not expand as the
content grows.

That's because absolutely positioned elements are taken out of the layout
flow, so they don't contribute any height or width to their containing
elements.

[Vigil]

On Wed, 24 Dec 2003 00:05:15 +0000, Eric Bohlman wrote:

That's because absolutely positioned elements are taken out of the layout
flow, so they don't contribute any height or width to their containing
elements.

Aha. Must find a workaround, then. Cheers.

--

..