467,874 Members | 1,746 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,874 developers. It's quick & easy.

height 100% problem-Mac Safari and IE 5.2

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?
Jul 20 '05 #1
  • viewed: 9672
Share:
1 Reply
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 -

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Secret Guy | last post: by
3 posts views Thread by TheXenocide | last post: by
6 posts views Thread by jslaybaugh | last post: by
4 posts views Thread by reycri | last post: by
1 post views Thread by joshthomas99 | last post: by
2 posts views Thread by ziycon | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.