Sat, 2005-03-26 19:16
Greetings -
Semi-newbie (although you may put me into 100% newbie after this post). I'm trying to use CSS to create a small border around the body of a web page. Basically, I'm using something like:
<style>
BODY
{
border: solid 10px #999999;
height: 100%;
margin-top: 1px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 1px;
padding: 10px;
}
</style>
To some degree, this works fine - I get the nice, grey border around the body of the page. But, there's a problem - the height: 100% directive makes the border cover 100% of the browser - but, if I resize the browser enough, specifically by reducing the height of the browser window, then sometimes the border will actually cut right across the text (to see what I mean, insert the code snippet into the header of a page, and watch what happens).
Basically, what I'm looking for is a border that is always visible at the top, and on the right and left hand sides of the page, but is only visible on the bottom if the page is a certain absolute page size.
Suggestions? Thanks! 
Sat, 2005-03-26 19:46
#1
Re: body border | 100% absolute page size?
margin-top: 1px; margin-left: 1px; margin-right: 1px; margin-bottom: 1px;
Can be shortened to
margin: 1px;
Sat, 2005-03-26 19:54
#2
Re: body border | 100% absolute page size?
Triumph wrote:
margin-top: 1px; margin-left: 1px; margin-right: 1px; margin-bottom: 1px;
Can be shortened to
margin: 1px;
Yup - I know - I just put all of the 4 'sides' in xplicitly to let me tweak things with a bit more control.
Sat, 2005-03-26 19:56
#3
Re: body border | 100% absolute page size?
canuck wrote:
you can still use the shortcut with all the same control
Yup - I know - I just put all of the 4 'sides' in xplicitly to let me tweak things with a bit more control.
margin: 1px 10px 15px 94px;
They correspond to top, right, bottom and left respectively.
canuck wrote:
I'm not seeing it. (to see what I mean, insert the code snippet into the header of a page, and watch what happens).
Sat, 2005-03-26 20:05
#4
Re: body border | 100% absolute page size?
Triumph wrote:
margin: 1px 10px 15px 94px;
They correspond to top, right, bottom and left respectively.
Ah, that makes sense. Thanks...
canuck wrote:
I'm not seeing it.
(to see what I mean, insert the code snippet into the header of a page, and watch what happens).
Not sure why - maybe it browser dependent? But, I don't think so (I see it in Firefox, and IE).
Basically, I can simplify the question down as follows - couple of different things I'd like to try:
1. I want a border, but not on the bottom (i.e., bottom margin 
. When I try the obvious (set margin-bottom: 0pt), doesn't work
2. I want borders that follow the page, NOT the browser - I want borders at the top (especially) and at the bottom (perhaps) that scroll up or down with the page, not stay locked at the top/bottom of the browser window.
Sat, 2005-03-26 20:05
#5
body border | 100% absolute page size?
It's because the border is being placed around the viewport.
Your best bet is to wrap everything in a container div, and give that the border. Give it no margins (so it pushes to the outer edge) and relevant padding.
Sat, 2005-03-26 20:16
#6
body border | 100% absolute page size?
thepineapplehead wrote:
It's because the border is being placed around the viewport.
Your best bet is to wrap everything in a container div, and give that the border. Give it no margins (so it pushes to the outer edge) and relevant padding.
OK - thanks! Any chance you could provide an example?
I should note it took me about 20 seconds to accomplish what I want using tables, but I'm trying to migrate several things to CSS, if possible. Here's the table code:
<html> <body bgcolor="grey" text=black vlink=black link=black> <table border=0 bgcolor=white height=100% width=100%> <tr valign=top><td> <center> <table border=0 width=95% cellpadding=3><tr height=100%><td> web page goes here - notice nice grey border.... </td></tr></table> </center> </td></tr></table>
So, an example of how to accomplish the above (or something reasonably close) would be much appreciated...
Sat, 2005-03-26 20:23
#7
body border | 100% absolute page size?
Oh. My. God.
I'm not going to suggest anything until you stick in a doctype and run it through the validator.
Sat, 2005-03-26 20:28
#8
body border | 100% absolute page size?
thepineapplehead wrote:
Oh. My. God.
I'm not going to suggest anything until you stick in a doctype and run it through the validator.
Sheesh - the preceding was just a code snippet - a doctype is a concern when you are building for release, not just to test (or demonstrate) coding ideas using vanilla code. What next, I should include the 40 lines of Javascript that are sometimes required to rewrite for different browsers? :?
And, the table code is valid. Not much need for a validtor for ~10 lines of basic HTML 101 tables code.
Sat, 2005-03-26 20:30
#9
body border | 100% absolute page size?
Quote:
a doctype is a concern when you are building for release, not just to test (or demonstrate) coding ideas using vanilla code.
Trust me, that sentence could not be any more wrong.
Without the doctype, IE is thrown into Quirks Mode, so you're fighting a losing battle before you start.
Use a doctype and proper code, then you can see the real differences between the browsers.[/code]
Sat, 2005-03-26 20:40
#10
body border | 100% absolute page size?
thepineapplehead wrote:
Quote:a doctype is a concern when you are building for release, not just to test (or demonstrate) coding ideas using vanilla code.
Quote:
Trust me, that sentence could not be any more wrong.
Yes, in general, but not for the code snippet I entered. It works perfectly under the any of the 5 browsers I have on my machine (including IE, with or without the quirks mode issue you raise).
Its called prototyping - basic vanilla. But, if you'd rather grandstand about standards, than provide a suggestion, then fine...
Quote:
Without the doctype, IE is thrown into Quirks Mode, so you're fighting a losing battle before you start.
Ultimately, these issues need to be dealt with, but all I was asking for was an example of accomplishing the same thing in CSS. If that requires huges browser-specific accomodations (more than generic HTML) then perhaps it isn't worth it.
Sat, 2005-03-26 20:46
#11
body border | 100% absolute page size?
Alright, enough about doctype *beep*ing - it isn't worth it.
All I was suggesting was use a container div around all of your code, and give that a border:
HTML:
<div id="container"> rest of page, divs, spans, etc </div>
CSS:
#container {
border: 1em solid #ccc;
}
If you want the 95% width, instead of an abitrary padding:
HTML:
<div id="container"> rest of page, divs, spans, etc </div>
CSS:
body {
background-color: #ccc;
}
#container {
width: 95%;
}
Enjoy!
Sat, 2005-03-26 21:14
#12
body border | 100% absolute page size?
thepineapplehead wrote:
Alright, enough about doctype *beep* - it isn't worth it.
Now I could have told you that. 
Quote:
All I was suggesting was use a container div around all of your code, and give that a border:
HTML:
<div id="container"> rest of page, divs, spans, etc </div>
CSS:
#container {
border: 1em solid #ccc;
}
If you want the 95% width, instead of an abitrary padding:
HTML:
<div id="container"> rest of page, divs, spans, etc </div>
CSS:
body {
background-color: #ccc;
}
#container {
width: 95%;
}
Enjoy!
Thanks much. Just what I was looking for.
Sat, 2005-03-26 21:44
#13
body border | 100% absolute page size?
Great, now if we check your site and there is no doctype we will track you down and call you Missy and point and laugh and stuff.
Sun, 2005-03-27 00:39
#14
body border | 100% absolute page size?
Triumph wrote:
Great, now if we check your site and there is no doctype we will track you down and call you Missy and point and laugh and stuff.
Which is only an issue if in fact you use code which is browser-sensitive, which (one might argue) is poor coding to begin with.
Anywho...thanks for the suggestions.
Sun, 2005-03-27 00:56
#15
body border | 100% absolute page size?
canuck wrote:
That's a gross misunderstanding. Poor coding starts with leaving out the doctype.
Which is only an issue if in fact you use code which is browser-sensitive, which (one might argue) is poor coding to begin with.
Seriously, we wouldn't lie to you.
Sun, 2005-03-27 01:02
#16
body border | 100% absolute page size?
what triumph said + ALL code is " browser sensitive" - there are at least 8 different browsers/ versions in current use that all interpret things differently, especially tables, and especially if the browser is in quirks mode
Bill