Forum Moderators: open
What I'm trying to accomplish is to wrap a page in kind of a 5-pixel picture frame, and to have that frame always appear at the outer margins of the browser window when the window is resized.
At its simplest, consider the code below that just attempts to put a red bar at the top and bottom of a page - table is 100% wide, 100% high. Top row is 5 pixels high, middle row is 100% high and bottom row is 5 pixels high. What I hoped would happen is that the middle row at 100% height would squeeze the top and bottom rows to the margins. It does in MIE, but Netscape seems to ignore the middle row's 100% height attribute and splits the page into thirds. Is there a better way to do this cross-browser? CSS? DHTML? I could, of course, blow the whole idea off, but this is personal now. * grin *
Sorry to be so wordy, anyone have any ideas for me?
Easier to see than to explain:
[ponyball.com ]
<html><head>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table border=1 cellpadding=0 cellspacing=0 width=100% height=100%>
<tr height="5" width="100%" bgcolor="#FF0000">
<td><img src="./images/1x1pixel.gif" width="5" height="5"></td>
</tr>
<tr height="100%" width="100%" bgcolor="#FFFFFF">
<td><img src="./images/1x1pixel.gif" width="5" height="5"></td>
</tr>
<tr height="5" width="100%" bgcolor="#FF0000">
<td><img src="./images/1x1pixel.gif" width="5" height="5"></td>
</tr>
</table>
</body>
</html>
various solutions may be available
but what springs to my mind here is what do you want to happen if the content in the main section gets too long for the page...do you want for your window to remain the same size with a scrollable mid section or do you want the page to expand but yet retain the "red border"
frames may be your simplest solution, if it's the former...otherwise trying to "stretch" your page to 100% (when content is not enogh to fill) could be more difficult
more info required
Suzy
This will work in CSS2 compliant browsers. In IE6 you would need to use an appropriate DTD to enable standard compliant mode.
html {
border-top:5px solid red;
border-bottom:5px solid red;
} Andreas
I didn't realise you could assign a style to the html tag
however it doesn't work in Opera (6.05) on a windows platform...
Suzy
html {
border: none;
padding: 1px;
background: darkkhaki;
margin: 0px;
} Color names are replaced with the corresponding rgb value on upload by my cms since CSS only supports the 16 VGA color names.
Andreas
Suzy, as the page grows vertically, I'd like the page to expand and retain the red border, am not necessarily interested in a scrolling center section.
Andreas, the border attributes work nicely in both IE6 & Navigator 6, of course and I suppose older browsers would ignore tags causing no cosmetic glitches. IE looks a little odd with the border running around the outside of the vertical scrollbar but beggars can't be choosers, I don't suppose.
Given a choice, though, I'd like to accomplish this using the oldest technology possible, that's why I tried going with tables.
Suzy, did you have a suggestion for the second scenario you gave?
it's tested it Opera6.05 IE6 and NN6, so I can't speak for other browsers
My suggestion uses CSS & a table .....
make your page have a red background and give padding:0 margin: 2% 0; (this gives the top and bottom a red space but the left/right zero, you could experiment with the left & right to suit, but be aware that different browsers will sometimes leave a bigger space on the right as Opera especially leaves room for it's scrollbar even though it's not there)
then you could make your table have a 1 or 2 px border to add to the effect
The only way I found to force the height was to add an extra cell to left (1px wide) and put in a 1px spacer.gif then give the gif width:1px and height:440px (experimenting with this will give you height you want, although it will not look the same in all browsers i.e. larger monitors, it will still have the red border above and below the table)
If I specified the height of the table at 100%(it was actually 99%) it worked in all 3 of my browsers but when the content got too large for the page, Opera would not expand the table and the content overflowed onto the red background..(I tried the overflow: visible, but this didn't work either)
so suggestion is possibly not a solution, but I did say it would be more difficult...
the CSS i used:
body{
background-color: red;
color: #000;
margin: 2% 0;
padding: 0;
}
table#wrapper{
width: 100%;
border-style: solid;
border-width: 2px;
border-color: #ccc;
font-family: verdana, tahoma, arial, sans-serif;
background-color: #fff;
color: #000;
padding: 0;
margin: 0;
}
table#wrapper td.space{
padding: 0;
width: 1px;
}
table#wrapper td{
padding: 1em 2em;
vertical-align: top;
}
HTML:
<table id="wrapper">
<tr><td class="space"><img src="spacer.gif" width="1" height="440" alt=""></td>
<td><!-- this is the main content cell -->
<p>content here</p>
<p> </p>
<p> </p>
<p>more content</p>
<!-- end main content area -->
</td></tr></table><!-- wrapper -->
Good Luck
Suzy
:)
andreas's post would indeed be your easiest solution, providing your content is enough to fill the page...
I was presuming (sorry) from your post that you wanted a border regardless of page size...
apologies to andreas It does work in Opera but what I meant was that it puts the border directly below the content, instead of the bottom of the page..
Suzy;)
