A Border Around Everything

**Neal** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

"Vigil" <me@privacy.net > wrote in message
news:pan.2003.1 2.23.14.43.42.1 71532@privacy.n et...[color=blue]
> 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+htm l+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.[/color]

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 · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

> I am trying to put a 7px border around a page.[color=blue]
>
> I have tried ...a 'wrapper' div, and I have tried making each
> side of the border a thin div as well.[/color]

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; 
}
DIV.backsmall {
border : 7px;
padding : 7px;
background : #CCFFFF; 
}

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

--------
MH

**Vigil** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

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

On Tue, 23 Dec 2003 16:36:27 +0100, MH wrote:
[color=blue]
> this will produce a dark blue border around a light blue background.[/color]

--

..

**Vigil** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

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 · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

> > this will produce a dark blue border around a light blue background.
[color=blue]
> With doctype XHTML stricht, it only works in MSIE 5.[/color]

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** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

On Tue, 23 Dec 2003 17:59:50 +0100, MH wrote:
[color=blue]
> 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[/color]

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

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

--

..

**Mark Parnell** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

On Tue, 23 Dec 2003 17:59:50 +0100, MH declared in
comp.infosystem s.www.authoring.html:[color=blue]
>[color=green]
>> With doctype XHTML stricht, it only works in MSIE 5.[/color]
>
> 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[/color]

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** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

On Tue, 23 Dec 2003 10:03:21 -0500, Neal wrote:
[color=blue]
> I've tried this, and I could never get it to work.[/color]

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:absolu te div - even if 'position' is the only attribute
the div has - the table will not expand as the content grows.

--

..

**Eric Bohlman** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

Vigil <me@privacy.net > wrote in
news:pan.2003.1 2.23.22.31.25.8 20944@privacy.n et:
[color=blue]
> 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:absolu te div - even if 'position'
> is the only attribute the div has - the table will not expand as the
> content grows.[/color]

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** · Jul 20 '05, 05:07 PM

Re: A Border Around Everything

On Wed, 24 Dec 2003 00:05:15 +0000, Eric Bohlman wrote:
[color=blue]
> 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.[/color]

Aha. Must find a workaround, then. Cheers.

--

..

A Border Around Everything

A Border Around Everything

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment