A border on the right side of the window?

[Pierre Jelenc]

I am trying to put a graphical border along the top, left, and right edges
of a page. For left and top I have an oversize GIF with the proper
graphics used as the background-image of either the body or an inside div.
For the right, I tried a floated div of height: 100% and with the
complementary right border as the background-image, and containing a
1-pixel high transparent GIF.

This simplified example does not work:

http://www.web-ho.com/temp/index.html

(The same result obtains if the styles for #window are applied directly to
the body.)

Both HTML and CSS validate, but the floated div is the height of the
transparent GIF instead of 100% of the containing div or body. How can I
force the div to extend the full size of the window (and no more so as not
to introduce unneeded scroll bars)? I do not want to constrain the width
of the page, so a fixed-size image won't do.

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog

[Spartanicus]

rc**@panix.com (Pierre Jelenc) wrote:

I am trying to put a graphical border along the top, left, and right edges
of a page.

Plenty of examples of how to do that on the web:
http://www.google.com/search?q=css+rounded+borders

--
Spartanicus

[Van der Weij]

Working example Firefox only it seems, (I miss the left-top border in IE):
Changed: height: 100% on body. Rest could be kept the same.

<style type="text/css" media="screen">
<!--
body {margin: 0; padding: 0; background-color: #fff; color: #000080;
font-family: Arial, Helvetica, sans-serif; height: 100%; }

#window {margin: 0; padding: 0; width: 100%; height: 100%;background-image:

url(gradient2.gif);
background-position: top left; background-repeat: no-repeat;
background-attachment: fixed;}
#main p {text-indent: 2em;}

#rightborder {float: right; background-image: url(gradient2r.gif);
width: 16px; height: 100%; }

-->
</style>

[Pierre Jelenc]

Spartanicus <in*****@invalid.invalid> writes:

rc**@panix.com (Pierre Jelenc) wrote:

I am trying to put a graphical border along the top, left, and right edges
of a page.

Plenty of examples of how to do that on the web:
http://www.google.com/search?q=css+rounded+borders

Thanks. I didn't think of searching for rounded corners, since mine are
beveled...

Pierre
--
Pierre Jelenc | New on Home Office Records: Ethan Lipton
| www.homeofficerecords.com www.ethanlipton.com
The Gigometer | Pepper Of The Earth: the HO blog
www.gigometer.com | www.homeofficerecords.com/blog