Hi .... uhmm I just registered to try to give you a hand
. Been browsing this site for a while and I just wanted to make sure I'm actualy gonna use the account I created since I have joined many forums .. just never stuck with it
But yeah, what you are trying to achieve is a pain in the rear and I haven't seen any tutorials to fix this for all browsers but I finaly go it to work.
---Uhmmm yeah, so back to our previous program --------
Instead of me picking at your code and changing this and changing that and end up confusing both of us, I will just drop down the steps I took inorder to achieve this I guess you can call it "Faux 100% height layout".
--
1.
XHTML (this is HTML in your case but I will refer to it as XHTML due to the doctype below, it should work in both since I will be refering to the CSS mostly)
Ok, I see that rc69 mentioned the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--
2.
CSS:
html,body{
height:100%;
margin:0px auto;
text-align:center;/*for IE5*/
padding:0px;
border:0px;
background-color: #E0E0E0;
}
-You will notice the html,body (mentioned by coolaid) there and you guessed right, replace your present body{} to what you see above. This is an important part in order to achieve this effect properly in most browsers. Keep in mind that when you want 100% height to work you must have a 100% parent container .... in this case the html,body acts as a parent container that is 100% in height.
--
3.
XHTML: <div class="container"></div>
-
Now correct, thanks for catching that rc69 (was <div=class"container"></div>
-The container will go around all of your tables that you have at the present. This is also called a wraper div or what ever you wanna call it.
css:
.container_div{height:100%;
display:table; /* Opera and FireFox (fix the viewport content overflow */
}
-Here you need to create another background image, I noticed you are using 1 table on each side for the dropshadow, either take a screenshot or go back to your drawing application and slice a 1px image of your entier layout ending on both sides of the dropshadow ... this means you will have a 1px height image that spans across your whole layout. Ok, so 1 background dropshadow image not 2 as you have now.
--
This should work for you now.
What I have done here is add a container div that streaches 100% in height. No matter what resolution your screen is at, your container div will streach.
Since you are using tables for the most part you can set your main tables at 100% to streach accordingly.
So it's your container div that is actualy doing the 100% work, your content can be like only 300px but you will always have the satisfaction of getting that bottom part to streach.
This will also work with a "only div layout" perfectly, you can check an example of my implementation of this at
thephotoguys.net.
--------- NOTE: ----------
It's like 5:30am ... haven't slept yet, so please forgive me if I fumbled this up in anyway, let me know if it works and if not I'm willing to go over this again or check out your attempt. Always do tweaking with a copy of your work just in case you get lost or end up messing up.
Lift OUT !!
Edited by Lift, 17 October 2005 - 03:25 PM.
0
Gotta de-monkeyfy (that is SO totaly not a word 
I gotta jet so I can't test it in other browsers .. but let me know what happens.
