Mon, 2005-10-10 22:02
So, in another thread I wrestled with a footer. Now it is playing nice and I know more about collapsing margins. Yay.
I have a new problem: I added the content in, but for some reason, it isn't paying any attention to the height that I'm giving it. The relevant CSS is this:
#content
{
color: #000000;
padding: 5px 0 76px 0;
margin: 0 auto;
width: 722px;
background-color: #A3571B;
height: 100%;
}That height of 100% isn't doing a dern thing in FF, Netscape and Opera. If I give it pixels it's fine, but no percentage changes anything. I tried removing the picture above it, but all that did was (expectedly) remove the picture and, thus, scoot the content up to the top. This is really odd to me because all the things that contain the "content" div are set to have a min-height of 100%.
In IE, it take it to mean 100% of the window-height. That's fine, I guess, but not what I mean... And this brings me to my real question:
Is there a way to tell the content div to start where it normally would and go to the bottom of the window or the bottom of the content, whichever is lower? Or would I have to have a fixed height or something to do this? Basically I want that background color to go all the way down and meet the footer.
For a fuller understanding, you'll want to look at the page and the css.
->Day<-
Mon, 2005-10-10 22:16
#1
Percentage Height No Workie
Not sure what your aiming for here, height 100% is not going to do anything you already use up the screen space height 100% on an inner div will do nothing , #content and #wrapper are already extended down to the footer and remember that height 100% is a fixed height for FF using height 100% on a div will give you 100% of the viewport/canvas and no more.
Hugo.
Mon, 2005-10-10 22:29
#2
Percentage Height No Workie
Just put a repeating background image on the body. Case closed.
Mon, 2005-10-10 22:43
#3
Percentage Height No Workie
This marries me to the fixed-width, though, and pending a recreation of the header graphic, we may go to variable-width content and a different BG image, too. In fact, I can show you the mock-up of the new BG. That one would be hard to spoof in the case of a browser window wider than my image, no?
That's why I've stayed away from things like faux columns. I also will probably be re-rounding the corners a la the main page, which would further complicate the faux column approach.
I could be wrong on any of those reasonings, so feel free to correct me. Thanks.
->Day<-
Mon, 2005-10-10 22:47
#4
Percentage Height No Workie
Erk. For some reason I didn't see Hugo's post. As for what I'm going for, the intent is to have the footer and content look like one unit that's sticking up from the bottom of the page, if that makes sense. The existent page (linked above) has a lame hack that kind of does what we want it to. I'm not sure how to be more clear without making a mock-up jpg or something. If that's what's needed, let me know and I'll see what I can do.
->Day<-
Tue, 2005-10-11 06:48
#5
Percentage Height No Workie
Ah
I see your problem.
You thought 100% height means 100% height. It doesn't!
100% height in IE means min-height 100% of browser window height (ie it will expand with more content beyond the bottom of the window, giving you a scroll bar).
100% height in Gecko based browsers means what the css standards say, restrict to 100% of the the viewing window (i.e. chop off the rest that may be below).
If I paste some code below, you need to read it carefully to see how to do it (the images are missing, make your own, they make it all 3D, ask for them if you want to see the effect):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="all">
html,body{
margin:0;
padding:0;
border:0;
/* \*/height:100%;/* */
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%;
min-width:760px;
background:#EFEFEF;
text-align:center;
}
div,p{margin:0}
p{
margin-bottom:.6em;
}
h1{
margin:0;
text-align:center;
font-size:1.5em
}
h2{
margin:1em 0 .5em 0;
font-size:1.3em
}
h3{
text-align:center;
margin-top:0;
font-size:1.1em
}
.clear{
clear:both;
height:1px;
overflow:hidden;
margin-bottom:-1px;
}
* html .clear{display:none}
#copyright{
font-size:.8em;
line-height:.8em;
margin:0;
}
#pagecontainer {
top:-5px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
width:760px;
/* \*/height:100%;/* */
}
#wrapper{
min-height:100%;
/* \*/height:100%;/* */
}
#wrapp\65 r{height:auto}
/* \*/* html #wrapper{height:100%}/* */
#wrapperleftimg{
top:0px;
width:9px;
position:absolute;
/* \*/height:100%;/* */
overflow:hidden;
}
#clearheadercenter{
height:187px;
overflow:hidden;
}
#clearfootercenter{
clear:both;
height:84px;
overflow:hidden;
}
#header{
position:absolute;
top:0px;
width:100%;
height:205px;
overflow:hidden;
}
.subheader{
overflow:hidden;
}
#subheader0{
background:#EFEFEF;
height:0px;
}
#subheader1{
margin:0 20px;
height:113px;
overflow:hidden;
background:;
}
#topmargin{
background:#EFEFEF;
height:10px;
}
#footer{
z-index:1;
position:absolute;
clear: both;
width:100%;
height:89px;
overflow:hidden;
margin-top:-84px;
}
#subfooter2{
text-align:center;
height:15px;
}
#madewithwebcoder{
z-index:1;
position:absolute;
right:25px;
margin-top:-46px;
}
#madewithwebcoder img{border:0}
}
.bottomtopmargin{
overflow:hidden;
}
#wrapperleftimg,.subheader,.subfooter,#wrapper .leftbg{background:url(grayshadybgheaderrowleft.gif) repeat-y left}
#clearheadercenter,#wrapper{background:#DDDDA9 url(grayshadybgheaderrowright.gif) repeat-y right}
.threeDuppermiddlebg,.threeDlowermiddlebg{
height:23px;
overflow:hidden;
}
.threeDupperleftbg{background:url(grayshadybgupperborderleft.gif) no-repeat top left}
.threeDupperrightbg{background:url(grayshadybgupperborderright.gif) no-repeat top right}
.threeDuppermiddlebg{margin:0 22px;background:#DDDDA9 url(grayshadybgupperborder.gif) repeat-x}
.threeDlowerleftbg{background:url(grayshadybglowerborderleft.gif) no-repeat top left;}
.threeDlowerrightbg{background:url(grayshadybglowerborderright.gif) no-repeat top right}
.threeDlowermiddlebg{margin:0 22px;background:#DDDDA9 url(grayshadybglowerborder.gif) repeat-x 0 12px}
#ctlogo{
background:#DDDDA9 url(MainCTLogo.jpg) no-repeat center;
height:114px;
}
#bodytext{
padding-left:2em;
padding-right:2em;
margin-top:0.5em;
line-height:1.2em
}</style>
</head>
<body>
<div id="pagecontainer">
<div id="wrapper">
<div class="leftbg">
<div id="clearheadercenter"></div>
<h1>CSS Source Ordered 2/3 Columned Page Maker v2.70</h1>
<div id="bodytext">
<p>Body Text here</p>
</div>
<div id="clearfootercenter"></div>
</div>
<div id="wrapperleftimg"> </div>
</div>
<div id="header">
<div id="topmargin" class="bottomtopmargin"> </div>
<div id="headerbg1" class="threeDupperleftbg">
<div class="threeDupperrightbg">
<div class="threeDuppermiddlebg"></div>
</div>
</div>
<div id="subheader1">
<div id="ctlogo"> </div>hello
</div>
<div id="headerbg2" class="threeDlowerleftbg">
<div class="threeDlowerrightbg">
<div class="threeDlowermiddlebg"></div>
</div>
</div>
<div id="headerbg3" class="threeDupperleftbg">
<div class="threeDupperrightbg">
<div class="threeDuppermiddlebg"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footerbg3" class="threeDlowerleftbg">
<div class="threeDlowerrightbg">
<div class="threeDlowermiddlebg"></div>
</div>
</div>
<div id="footerbg2" class="threeDupperleftbg">
<div class="threeDupperrightbg">
<div class="threeDuppermiddlebg"></div>
</div>
</div>
<div id="subfooter2">
<div id="copyright">
<p>Except where owned by others, all content © ClevaTreva Designs 2005.</p>
</div>
</div>
<div id="footerbg1" class="threeDlowerleftbg">
<div class="threeDlowerrightbg">
<div class="threeDlowermiddlebg"></div>
</div>
</div>
</div>
<div id="madewithwebcoder">
<a href="http://www.tsware.net/" title="Link to TSWare"><img src="webcoder001.gif" alt="Made with WebCoder" /></a>
</div>
</div>
</body>
</html>
Trevor
Tue, 2005-10-11 07:27
#6
Percentage Height No Workie
Hi
That code wasn't quite what I wanted. I'll fix and repost it later!
Trevor
Tue, 2005-10-11 07:37
#7
Percentage Height No Workie
Hi
Maybe this is better:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="all">
html,body{
margin:0;
padding:0;
border:0;
/* \*/height:100%;/* */
}
body{
font-family:verdana,arial,sans-serif;
font-size:76%;
min-width:760px;
background:#EFEFEF;
text-align:center;
}
div,p{margin:0}
p{
margin-bottom:.6em;
}
h1{
margin:0;
text-align:center;
font-size:1.5em
}
h2{
margin:1em 0 .5em 0;
font-size:1.3em
}
h3{
text-align:center;
margin-top:0;
font-size:1.1em
}
.clear{
clear:both;
height:1px;
overflow:hidden;
margin-bottom:-1px;
}
* html .clear{display:none}
#copyright{
font-size:.8em;
line-height:.8em;
margin:0;
}
#pagecontainer {
top:-5px;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:left;
width:760px;
/* \*/height:100%;/* */
}
#wrapper{
min-height:100%;
/* \*/height:100%;/* */
}
#wrapp\65 r{height:auto}
/* \*/* html #wrapper{height:100%}/* */
#clearheadercenter{
height:187px;
overflow:hidden;
}
#clearfootercenter{
clear:both;
height:84px;
overflow:hidden;
}
#header{
position:absolute;
top:0px;
width:100%;
height:205px;
overflow:hidden;
}
.subheader{
overflow:hidden;
}
#subheader1{
margin:0;
height:113px;
overflow:hidden;
background:#FFFCCC;
}
#topmargin{
background:#EFEFEF;
height:10px;
}
#footer{
z-index:1;
position:absolute;
clear: both;
width:100%;
height:89px;
overflow:hidden;
margin-top:-84px;
background:#FFFCCC;
}
#subfooter2{
text-align:center;
height:15px;
margin-top:37px;
}
.bottomtopmargin{
overflow:hidden;
}
#clearheadercenter,#wrapper{background:#DDDDA9}
#bodytext{
padding-left:2em;
padding-right:2em;
margin-top:0.5em;
line-height:1.2em
}</style>
</head>
<body>
<div id="pagecontainer">
<div id="wrapper">
<div class="leftbg">
<div id="clearheadercenter"></div>
<h1>Body Title</h1>
<div id="bodytext">
<p>Body Text here</p>
</div>
<div id="clearfootercenter"></div>
</div>
</div>
<div id="header">
<div id="topmargin" class="bottomtopmargin"> </div>
<div id="subheader1">hello</div>
</div>
<div id="footer">
<div id="subfooter2">
<div id="copyright">
<p>Except where owned by others, all content © ClevaTreva Designs 2005.</p>
</div>
</div>
</div>
</div>
</body>
</html>
It gives me full height in IE and FF.
Trevor
Tue, 2005-10-11 10:16
#8
Percentage Height No Workie
Ah-HA! That code was quite helpful. I adapted it for my own uses, spoofing a separated header and doing a little clean-up. Lemme know, Trevor, if you want some kind of credit in the foot-note, there, of the final site. I mention this because you did put that copyright notice on the code you posted. However, if it makes you feel better, I didn't copy/paste any of it.
I'm kind of proud of the changes I made, especially the BG spoof with the header. I tested this in IE, FF, Netscape and Opera and behavior is almost identical in all four. IE doesn't get the min-width thing, but that's alright; I almost gave the site that behavior in the other browsers, originally. I will try to remember to do some Mac testing tomorrow.
For a while, I had content height: 100%, and that was no good when the content was longer than the window. I was tipped off to what the deal was when I noticed that IE was behaving as I wanted. "Oh ho ho," I thought, "IE treats 'height' as if it were 'min-height'." Thus, I gave contents a min-height: 100% and then added an IE hack to the style sheet for height: 100%. That made me much happier.
Feel free to mess with the thing to see if you can make it freak out in some browser or other, but I couldn't. Also, the css might be of interest.
Think this thread will be of help/interest to others? Should I post the final HTML and CSS here for when rebuild.html and .css go offline?
->Day<-
Tue, 2005-10-11 10:28
#9
Percentage Height No Workie
Hi
Copyright (pah, who cares?). Everything I do is public and free, no acknowledgements are ever necessary.
Check my sig.
Trevor
Tue, 2005-10-11 10:29
#10
Percentage Height No Workie
He did copyright the design 
My only worry is the use of the escape hacks to feed height:100%.
Hugo.
Tue, 2005-10-11 10:32
#11
Percentage Height No Workie
Thanks, then, Trevor.
And, Hugo, why is that worrisome? I know very little about IE hacks, so... is there a better way to make sure only IE sees the height: 100%?
->Day<-
Tue, 2005-10-11 10:32
#12
Percentage Height No Workie
Hi Hugo
I think our posts crossed in the ether!
If I remember right, height 100% doesn't work in Standards mode for MAC IE 5.x, so that (I think) is why used it.
Trevor
Tue, 2005-10-11 11:07
#13
Percentage Height No Workie
The concern was just that this would not feed the height simply to IE but to Mozi as well. it would be hiding the rule from IEMac only
It would need to be:
/* \*/
* html selector {height:100%;}
/* */
But I haven't followed the layout requirements to see whether fixing height in FF/Mozi is a problem or not, but the footer element does seem to drop down when the height is increased leaving a space between it and the content element, not sure if that was the aim though, and I may just be confusing the issue 
Hugo.
Tue, 2005-10-11 11:13
#14
Percentage Height No Workie
As is, it works for me in FF. I am under the impression that FF and Mozilla are identical. Is that a wrong impression? Should I go download a copy of Mozilla for testing, as well?
The intention was for the footer to drop down and be either:
a) at the bottom of the window if the window is longer than the content
or
b) at the bottom of the content if the window is shorter than the content.
I hope that's more clear on the footer behavior I want.
->Day<-
Tue, 2005-10-11 14:08
#15
Percentage Height No Workie
Mozilla should be the same as FF I just refer to FF/Mozi sometimes Mozilla is responsible for both FF and the Mozilla browsers using the Gecko engine.
I checked the layout in Mozilla and it seems fine.
The footer behaves then as expected I just wasn't sure if setting the height for FF was what was intended; although I see that you have only used height on #main-wrapper, you may as well hide that from IEMac:
/* Hack for IE. Hide from IEMac \*/
* html #main-wrapper { height: 100%; }
/* end hide */
I did notice that your drop down on the navigation is positioned to the extreme left making it un-reachable and also that in IE it does not work, you will need some javascript or hover script for it to work.
Hugo.
Tue, 2005-10-11 14:16
#16
Percentage Height No Workie
Ah. I started a new thread about my menu, lest this one get too off-topic and rambling for others to follow later.
The escape-in-comments thing hides stuff from IEMac, yes?
And the "* html selector" thing hides stuff from everything except IE? Or IE and Moz/FF?
And, also, why would I need to hide the height from IEMac? I've not tested it myself (yet), but are you implying it will better-handle min-height?
->Day<-
Tue, 2005-10-11 16:55
#17
Percentage Height No Workie
Hi Both
Hugo, this is the key bit of code:
#wrapper{
min-height:100%;
/* \*/height:100%;/* */
}
#wrapp\65 r{height:auto}
/* \*/* html #wrapper{height:100%}/* */
The odd looking wrapper uses the hex escape for e (\65) followed by a tab. IE ignores this, but Safari and Mozilla see it, thus switching off the height:100% to height:auto, replacing it with min-height:100%
As I said, the escapes are used to hide the 100% height from IE5.x MAC, which doesn't like it if in Standards mode.
Day:
The Gecko engine is at the heart of many browsers. Firefox (from the Mozilla organisation) is probably the best.
Trevor
Tue, 2005-10-11 17:03
#18
Percentage Height No Workie
I wonder why you've set the height to 100% twice, both times with the escaped-comment thing. You'll note that this bit isn't existant in my own code, mostly because I didn't know what it was for. Basically this is catering to IE/Mac? As my code stands, it works in all four Windows browsers that I've tested it in.
->Day<-
Tue, 2005-10-11 17:10
#19
Percentage Height No Workie
Hi
I tested this code in loads of browsers, going back some way, and needed both sets to make all of them work. You are right, the modern browsers are OK, but older ones are not.
I had quite a few problems with Safari on the mac, and Konqueror on Unix.
Trevor
Tue, 2005-10-11 18:10
#20
Percentage Height No Workie
Apologies Trevor; I missed the hex escape, comes of looking at a glance; and failed to notice the /height escape and the star selector after the mac escape :roll: doing well aren't I .
Day please ignore me. Trevor's hacks were all there, present and correct; I was just not looking carefully enough .
However is the star selector happy with the slash against it /* well I've got to find something.
Hugo.
Tue, 2005-10-11 18:12
#21
Percentage Height No Workie
Hugo wrote:
However
As many a Roman CSS newbie said oh so many hundreds of years ago... Quid?
->Day<-
Tue, 2005-10-11 20:35
#22
Percentage Height No Workie
You what?
Would you like to decline that verb?
(Yes, I'm old enough to have gone to a school that taught Latin).
Trevor
Tue, 2005-10-11 20:38
#23
Percentage Height No Workie
And old enough for the memory to be fading away? 
I jest. You decline nouns and conjugate verbs. And "quid" is neither. It means, if memory serves, what. It took me six semesters to finish my required four semesters of it at university, so I could be wrong.
->Day<-
Tue, 2005-10-11 20:48
#24
Percentage Height No Workie
Haha
In fact, I became a passable bridge player in my latin lessons (sat at the back, teacher never moved from his desk - ahh halcyon days).
Seen Harry Potter and the Philosopher's Stone? Seen my school (converted convent), uniforms, capes and all.
Trevor