Forum Moderators: not2easy
It's only 1 line of markup required (the <script> in your <head>) and it does the rest for itself.
Supports px, em and % values for edges and margin. Supports px and em for borders.
How do you make 100% work with 10px padding? You can't unless you specify a pixel width, but you can't cos you don't know how big the screen is.
The proper way (I believe as recommended by SuzyUK) would be to do this, imagine you have a 100px header and want the rest of the page to scroll, as in this thread:
[webmasterworld.com...]
Your CSS would be something like:
div {
position: absolute;
top: 100px; left: 0;
bottom: 0; right: 0;
padding: 10px;
overflow: auto;
}
Thus using the top, left, bottom and right properties to stretch the box. Works fine in IE7 and FF, but not in IE6, it only recognises the top and left.
It's a fix for old browsers to accommodate new standards, rather than a fix for new browsers to accommodate old standards, such as my table row height fix.
In IE6 WITH the fix, the page still doesn't resize dynamically though... isn't that something you'd want? I guess you'd just add the function call to when window is resized, And that will fix things.
Does IE7.js fix this problem too? It's supposed to fix most of IE's bugs... What's it's status now, anyway? it seems like the site hasn't been updated in a long time or something?
[edited by: Xapti at 12:47 am (utc) on April 22, 2007]
So the only problem that's fixed is the bottom and right side's positioning?
Yes, that is the problem with IE6.
In IE6 WITH the fix, the page still doesn't resize dynamically though... isn't that something you'd want?
Didn't really think about it, depends how many people in IE6 will fiddle with their window size while looking at the page.
I guess you'd just add the function call to when window is resized, And that will fix things.
Should do, download the script, add an onResize and let me know.
Does IE7.js fix this problem too? It's supposed to fix most of IE's bugs...
Never heard of it. I tend to write all my own stuff anyway.
In FF after specifying edges you can use height/width 100% to fill the space on nested children.
This doesn't work in IE6 or IE7.
However I found that after applying my fix in IE6, width/height 100% then worked on nested children. So have modified script to calculate and add width and height to IE7 so nested sizes then work.
It also eliminates the need for faux columns, as your contained DIVs can now use 'height: 100%;'.
