Hey All,
I have a simple HTML page with a outer <TABLE> based layout. Sorry!
Anyway, all containers and TDs have either an explict height set or a 100% height set.
Also, I have set both HTML and BODY to 100% height, with 0 margin and 0 padding as a lot of people have suggested.
Now, I am trying to nest a DIV inside a TD of height 100% to fill the TD and scoll if there is any overflow.
The problem is this works in IE but *not* in Firefox:
In IE the <DIV> .full_scroll expands to fit the height of the containing <TD> and scrolls as intended.
In FF the <DIV> expands to fit all the content and the whole page scrolls.
Now... since we all know that FF is standards complaint and IE does it all wrong, I can only assume that my CSS is "scwewy"!
I have tried various suggestions that people have from all over the good WWW and have come up with nothing successful. I am using min-height, and an IE specific CSS selector for height, and all that jazz...
Any help that achieves the intended result as you can see by testing in IE would be appreciated.
Here is my code, with styles and html. You can just cut-paste it into notepad to test in both browsers:
HTML Code:<html> <head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>Argh!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> /* ================================================================================== */ /* general */ /* ================================================================================== */ * { margin: 0px; } BODY, HTML { height: 100%; padding: 0px; } TD { font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size:12px; color:#000; } /* ================================================================================== */ /* BANNERS */ /* ================================================================================== */ .application_banner { height: 40px; background-color: #c1ccde; border-bottom: 1px solid #a4a4a4; } .banner { width: 100%; background-color: #c1ccde; } .table_toolbar { font-weight: bold; color: #333333; height: 25px; padding: 4px; background-color: #dfdfdf; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #a4a4a4; } /* ================================================================================== */ /* GRID */ /* ================================================================================== */ DIV.full_scroll { position: relative; top: 0px; left: 0px; overflow: auto; min-height: 100%; padding: 10px; } * html DIV.full_scroll { /*width: 100%;*/ height: 100%; } </style> </head> <body> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr height="40"> <td class="application_banner"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr> <td>BANNER</td> <td class="banner"> </td> <td>LOGO</td> </tr> </table> </td> </tr> <tr height="100%"> <td class="mainbody"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr height="25"> <td class="table_toolbar"> <input name="OK" type="button" value="OK" /> <input name="Cancel" type="button" value="Cancel" /> </td> </tr> <tr height="100%"> <td valign="top"> <div class="full_scroll"> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> overflowing content goes here...<br><br> </div> </td> </tr> </table> </td> </tr> </table> </body> </html>



Reply With Quote
Bookmarks