tags:

views:

909

answers:

5
A: 

Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.

Try to use clear: left; or clear: both; in your style.

Kevin D.
I'd never thought that 100% can be so tricky. I tried using clear property, but to no avail. Thanks for you time!
A: 

100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.

Also, your head tag isn't closed properly. Check this

Malfist
Yea, I forgot about the title in the head tag :)It's either I didn't understood this right or just adding auto to bottom and top didn't make any impact. Thank you for your time!
A: 

Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.

Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.

And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.

ajm
Thank you for your help, I will definitely note that.
A: 

It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.

Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.

You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.

Samir Talwar
I did exactly as you've said. And it sort of helped, but the thing is theres still 5px of space on the bottom that not covered. Any idea why?Thank you for your time.
Now that I've checked the page within all popular browsers, heres what I saw: Firefox: very close, - those damn 5px; Opera: works like a charm; IE7: doesen't work; Safari: doesen't work; Chrome: doesen't work. I'm totally lost.
I forgot to add min to height in #flashcontent. My bad. Now it looks right. But what I cannot understand why in Opera vertical scrollbar goes all the way down, but in other browsers it stops when #flashcontent ends.
Can you upload it again so we can play about with the latest version? Thanks.
Samir Talwar
Sure, link is updated. Prob was that only in opera it scrolls differently, see for your selfs.
A: 

Thanks to all of you problem is solved!