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

rcpj@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

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-im
age:

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>

Spartanicus  <invalid@invalid.invalid> writes:
> rcpj@panix.com (Pierre Jelenc) wrote:
> 
>
> 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