PDA

Click to See Complete Forum and Search --> : height problems

michaellunsford
06-23-2007, 12:32 PM
I've been having trouble getting different browsers to read valid height code differently. Any help would be welcome.

here's the idea: single table, three rows. Table is 100% high. Top and bottom rows have height specified in px. Middle row is supposed to stretch to fill up whatever's left over.

IE is just blowing it all the way around. Even in quirks mode IE plain ignores the height attribute and evenly distributes the table height amoung the three rows: 33% each.

More complicated problem in FF: The table's okay, but the middle row is supposed to have a <div> with 100% height intended to take up the whole row, top to bottom. Instead, FF sets it to only a single line high. BUT, in quirks, it renders just fine.

Safari and Opera are perfect.

Here's a basic example -- link to actual pages below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN".......

.....
<table id="maintable" cellpadding="0" cellspacing="0">
<tr>
<td id="header">&nbsp;</td>
</tr>
<tr>
<td><div id="main_content">&nbsp;</div></td>
</tr>
<tr>
<td id="footer">&nbsp;</td>
</tr>

</table>


html,body {
height:100%;
margin:0;
}
#maintable {
height:100%;
width:800px;
margin:auto;
background:url(/images/middle_bgdk.jpg) no-repeat center center #ccdca0;
}
#header {
height:140px;
width:800px;
background:url(/images/top.jpg) no-repeat #9a8954;
}
#main_content {
width:692px;
height:100%;
margin:auto;
}
#footer {
height:108px;
width:800px;
background:url(/images/bottom.jpg) no-repeat #003d2b;
}

I posted two test pages on a spare URI:
http://www.cawthornegroup.com xhtml
http://www.cawthornegroup.com/index2.html quirks

This is really frustrating. The biggest problem is IE (surprise, surprise), but FF's refusal to make that div 100% high is also getting me fired up. Any ideas? Hacks?

Thanks!
michaellunsford
06-23-2007, 01:36 PM
Well, if I add the height:100% to the middle row, it expands it in Firefox, but IE goes 100% of page height, instead of 100% of what's left, so I made it 80%. Still a little big on my monitor -- but much better than the gaping holes IE was making before.

I suppose the reason my FF problem on the <div> is the parent <td> did not have a height specified. So the child div didn't know how much room it had :confused:

at any rate, the addition of a height attribute seems to have fixed the bulk of my problems. Now I'm just left with the annoyance of different computers having different resolutions. I guess I can live with that. :)
Centauri
06-23-2007, 08:15 PM
As tables are for displaying tabular data, there should be NO REASON to want to make them 100% screen height (or width), or to ever put a div inside one.........
michaellunsford
06-24-2007, 09:22 AM
so, how to make three div's do the same thing? Static header and footer, middle div auto-stretch to accommodate the rest of the space. It can not be done.
Centauri
06-24-2007, 09:27 AM
Like this (http://www.cssplay.co.uk/layouts/basics2.html) ?
michaellunsford
06-24-2007, 10:47 AM
Hey, that's pretty neat, but not exactly what I'm trying to do. The header and footer are supposed to be like part of the page. Sometimes, the volume of content of the page will push the footer down out of sight. When that happens, scrolling down to read all of the content will scroll the header up and out of sight.

If you can swing that with the div structure, you'd be da' man.
Centauri
06-24-2007, 11:31 AM
Well, you could try one of these (http://www.pmob.co.uk/temp/3colfixedtest_4.htm) designs
ray326
06-25-2007, 12:12 AM
Or read http://alistapart.com/articles/holygrail
michaellunsford
09-04-2007, 10:37 PM
Sorry for the long delay in replying -- Been busy with other things and just now getting back to this.

I had found the "holy grail" already -- but I never could get it work. The footer appears at the bottom of the text (instead of the bottom of the page) in Safari (which may actually be Safari's fault).

Centauri's link looks really good, but I'm having some difficulty with it...

Here's my nutshell version of the code:
<style type="text/css">
#content {
min-height:100%;
margin-bottom:-99px;
}
#footer {
height:99px;
}
</style>
<div id="content">some content</div>
<div id="footer">footer content</div>
okay, so the footer is supposed to be at the bottom of the page. The code works great in FF and Opera, but IE and Safari seem to work fine UNTIL the content pushes the page below the available window height. When that happens, the footer creeps up over the text at the bottom.

If I add a 99px pading to the bottom of the content area it pushes the footer back into place in IE and Safari but it creates 99px of extra whitespace in FireFox and Opera (thereby making the content height 100%, and pushing the footer below that -- requiring a scroll to see it). What to do?

live example:
http://new.dougashy.com
Centauri
09-04-2007, 10:55 PM
The minimum height and bottom margin should be on a wrapper that encloses everything except the footer. The actual content should be in another div, which gets the bottom padding.
michaellunsford
09-04-2007, 10:57 PM
oops -- edit post:

getting close to the footer with conent pushes it down back below the page - adding a 99px padding below the content area just adds 99px of white space.
michaellunsford
09-04-2007, 11:13 PM
slightly less simplified code:

<style type="text/css">
#wrapper {
min-height:100%;
margin-bottom:-99px;
}
#left_content {
float:left;
}
#main_content {
float:right;
}
#footer {
height:99px;
}
</style>
<div id="wrapper">
<div id="left_content">content, menu, etc</div>
<div id="main_content">body text</div>
</div>
<div id="footer">footer content</div>

adding padding-bottom:99px to the main_content area just makes whitespace. If the content gets close to the footer, the footer gets pushed out of view.
Centauri
09-04-2007, 11:24 PM
Only just noticed the link to the page. As the footer already has the -99px top margin, the container does not need the negative bottom margin. The footer should follow the container, so the container needs to clear its internal floats, not the footer #container {
width:768px;
min-height:100%;
margin:0 auto;
overflow: hidden;
}
#footer {
font-size:10px;
text-align:right;
color:#9C6;
height:99px;
margin:auto;
margin-top:-99px;
width:768px;
background: url(/images/footer_img.jpg) no-repeat top right;
}
#main_content {
width:550px;
padding:5px 5px 104px;
float:right;
/* background:url(/images/main_content_bg.jpg) top left repeat-y #e8e5ba; */
color:#234641;
}

There is also a problem with IE6 in that the content drops down below the side bar. I think this is due to the negative left margin on the .homepageheader div - IE6 won't allow content to be pulled outside the main_content div, instead making the div bigger to accommodate, which in turn means it doesn't fit... Not sure how to get around that at the moment.
michaellunsford
09-05-2007, 09:24 AM
sliding the -99px around doesn't appear to affect anything. I originally started out without it on the footer at all -- added it to see if something would change. Nothing changed, so I must have neglected to remove it.

So, no resolution as yet.
Centauri
09-05-2007, 10:06 AM
I usually prefer the negative margin on the footer rather than the container, as it usually results in the footer displaying on top rather than behind. The code I gave above should have resolved the differences in footer position between FF and IE7 though? As far as IE6 goes, I'm going to set this up locally to have a closer look - haven't had the time to do so yet.
michaellunsford
09-05-2007, 10:16 AM
Not entirely sure, as the footer is covering up the text at the bottom of the page.

Wish there was a developer tools in IE like FF has. It would really help me figure this out.
Centauri
09-05-2007, 10:40 AM
?? The previous code I posted should have prevented any covering of text...

As far as the tools goes, there is - I use the Web Accessibilty Toolbar (http://www.paciellogroup.com/resources/wat-ie-about.html), which is what I have been using to work this out.
michaellunsford
09-17-2007, 12:07 AM
well, it's not perfect, but a minor IE hack (adding buffer to the bottom of the content area) got everything working okay. Thanks for the help.
ray326
09-17-2007, 12:32 AM
Wish there was a developer tools in IE like FF has. It would really help me figure this out.Fang recently posted a link to Microsoft's try at a developer toolbar. As with all things MS, it's limited and flaky.
Centauri
09-17-2007, 08:31 AM
As with all things MS, it's limited and flaky.

Really !!!??? :eek: Could this be true? :eek: :D :D :D :D
ray326
09-17-2007, 01:16 PM
I know it may be blasphemous to some but that's just the way I roll. :D
michaellunsford
09-17-2007, 02:19 PM
while we're off the subject, I thought I should mention that the IE blocks content from it's developer's toolbar. The first time "IE has blocked potentially harmful content from this page" that it generated from it's toolbar, it was kind of funny -- but now it's just old.
ray326
09-17-2007, 10:33 PM
The same thing happens with at least some of the tools in the web accessibility toolbar.