By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

height 100% problem-Mac Safari and IE 5.2

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.