DCElliott
12-09-2002, 05:03 PM
I have been working on a new pure-CSS layout that completely fills the page at *practically* all resolutions. This was a task I set myself after Zero's thread on getting the content to fill the page.
This *should* not have been hard. Set up a few horizontal divs with %age heights, what could be difficult. Well - making a template that works across browsers with a minimum of hacks is the most exasperating thing I have done in a long time.
Here are a few of the things I have learned:
Netscape needs a html {height:100%;} style - I think it must calculate all relative heights from this reference.
Rounding factors on the %heights of the divs means that you should set body {height:99%;} to "clip" the content before it gets >100% and forces a vertical scrollbar.
Rounding also means that you can't count on a there being a constant distance from the bottom - when you look at my template, you will see why this is important.
DOCTYPE declarations are very important in determining how the browser renders your page since it determines how the box dimensions are calculated.
Absolute positioning means you have to specify all the other dimensions more precisely. A relatively positioned div gets by quite happily with width:auto - not so for one absolutely positioned.
1st Page does not duplicate IE6 or IE5 exactly - as for Navigator 7 - forget about it. So keep two browsers running and check, check, check.
I ran into a width bug in IE6 that had IE6 behaving like IE5 when calculating the width of an absolute div. I had to use a conditional comment (seen at the end of the embedded styles) to override the stylesheet for IE.
If you set overflow:auto for the body in Navigator, you really, really, have to watch your composite widths (margin, border, padding and content)
So, I give you:
GHANJA style
This is a zip file (it has two files: the html and a small gif) - just unzip it and bring up ghanja.html. (I called it that because it is in the colors of the Jamaican flag - I hadn't planned it that way, it just happened. I wanted contrasting primary colors for the divs and went a bit overboard. :p It has nothing to do with certain extra-curricular activities :smoking:
There are a few interesting tricks in there and I hope folks can find something to talk about. to see it in all its glory, you should shut off the 1px borders that I left on to show up the edges of the content and footer divs. Can anyone tell me what footer-filler is for?
This *should* not have been hard. Set up a few horizontal divs with %age heights, what could be difficult. Well - making a template that works across browsers with a minimum of hacks is the most exasperating thing I have done in a long time.
Here are a few of the things I have learned:
Netscape needs a html {height:100%;} style - I think it must calculate all relative heights from this reference.
Rounding factors on the %heights of the divs means that you should set body {height:99%;} to "clip" the content before it gets >100% and forces a vertical scrollbar.
Rounding also means that you can't count on a there being a constant distance from the bottom - when you look at my template, you will see why this is important.
DOCTYPE declarations are very important in determining how the browser renders your page since it determines how the box dimensions are calculated.
Absolute positioning means you have to specify all the other dimensions more precisely. A relatively positioned div gets by quite happily with width:auto - not so for one absolutely positioned.
1st Page does not duplicate IE6 or IE5 exactly - as for Navigator 7 - forget about it. So keep two browsers running and check, check, check.
I ran into a width bug in IE6 that had IE6 behaving like IE5 when calculating the width of an absolute div. I had to use a conditional comment (seen at the end of the embedded styles) to override the stylesheet for IE.
If you set overflow:auto for the body in Navigator, you really, really, have to watch your composite widths (margin, border, padding and content)
So, I give you:
GHANJA style
This is a zip file (it has two files: the html and a small gif) - just unzip it and bring up ghanja.html. (I called it that because it is in the colors of the Jamaican flag - I hadn't planned it that way, it just happened. I wanted contrasting primary colors for the divs and went a bit overboard. :p It has nothing to do with certain extra-curricular activities :smoking:
There are a few interesting tricks in there and I hope folks can find something to talk about. to see it in all its glory, you should shut off the 1px borders that I left on to show up the edges of the content and footer divs. Can anyone tell me what footer-filler is for?