height 100% problem-Mac Safari and IE 5.2

[Ron Bott]

I have a layout that has a fixed size #container <div> with a shadow
running along the right side that encloses the content area. I would
like the shadow background to extend to the full height of the page,
not just the viewport. Here is some code:
html, body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#container {
position: absolute;
top: 0;
left: 0;
width: 764px;
height: 100%;
background: #fff url(images/shadow_side.gif) top right repeat-y;
}
html>body #container {height:auto}

The page displays how I would like it to in Win IE 5, 5.5, 5 & Win
NN7, Win Opera 7, Win Mozilla as well as Mac NN7, Opera 6.

Problems with Mac Safari and IE 5.2. content area and background do
not extend to the bottom of viewport or bottom of page if scrolling is
needed. Test page can be seen here:

http://homepage.mac.com/pmleblanc/test.html

Any ideas why this isn't working?

[Els]

Ron Bott wrote:

I have a layout that has a fixed size #container <div> with a shadow
running along the right side that encloses the content area. I would
like the shadow background to extend to the full height of the page,
not just the viewport. Here is some code:
html, body {
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#container {
position: absolute;
top: 0;
left: 0;
width: 764px;
height: 100%;
background: #fff url(images/shadow_side.gif) top right repeat-y;
}
html>body #container {height:auto}

The page displays how I would like it to in Win IE 5, 5.5, 5 & Win
NN7, Win Opera 7, Win Mozilla as well as Mac NN7, Opera 6.

Problems with Mac Safari and IE 5.2. content area and background do
not extend to the bottom of viewport or bottom of page if scrolling is
needed. Test page can be seen here:

http://homepage.mac.com/pmleblanc/test.html

Any ideas why this isn't working?

Because your container is set to height 100%, which I think
is rendered as 100% of the viewport. If you set it to 800px
for instance, also the background image will extend to that
height, (I think).
Another option: make the img itself 1000px high, no-repeat.
As long as it's a background image, this won't influence the
scrollbars.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -