> Well, your problems are manyfold. > > Firstly, you're depending on behaviour that was never mandated in the > specs, that being that a height of 100% means 100% of the available > window area or available area.
I don't think he's "depending" on this behavior. He's lamenting the fact that CSS doesn't support a mechanism for sizing elements relative to the available space. In HTML all heights and widths are based on the available area, not the size of the containing block. I also think he's hoping that someone will prove him wrong. :) > The specs, for better or for worse, don't > recogise this usage because it's meaningless in the broader context of > positioning, which is that positioning is done on the basis of the total > rendering area of the page, not just the current viewport. I don't think it's positioning we're discussing here: it's sizing. If all your elements are positioned relative to one another, there's no reason you can't support sizing based on available heights and widths (as was the case in HTML). Once you add absolute positioning to the mix, it gets a bit trickier. > You'll get this behaviour *without* the doctype because that's how it > was treated by browsers in the past. This is quirks mode, and there be > funkiness. I think Isaac's aware of this. > If IE wasn't so braindead, it'd support fixed positioning. In this case, > you could position your elements wherever you liked relative to the four > sides of the screen. This is possible in Firefox, but not in IE, because > MS have slowly let IE die. Fixed positioning is possible in Internet Explorer. It is even possible in versions of Internet Explorer which pre-date the Mozilla project. Again, this is not about positioning, it's about sizing elements. Also, Microsoft has not let Internet Explorer die. They are going to tie Internet Explorer upgrades to new releases of the operating system. Personally, I wish they hadn't made this decision, but that's their currently announced intention. > Your problem isn't with the spec--and definitely not with the box model, > which doesn't even come up here--but with a lack of implementation of > the spec. I think you've misunderstood the nature of the problem. It is most definitely an issue with the spec. Whether or not you consider it to be a fault of the spec (I do), is up for debate. Here's a few links on the subject: http://www.quirksmode.org/css/100percheight.html http://www.webmasterworld.com/forum83/200.htm However, none of the solutions mentioned in these articles completely solves Isaac's problem. In fact, Isaac only got as far as he did because he mixed html table tags with divs. Isaac, I've included some code below which seems to solve at least part of the problem I think you were running into. I've added height and widths to the html and body elements (I think you were already doing this). I've also added them to each element all the way down. The theory is that if you don't specify either height or width on one element, that element will default to auto. Auto translates to the size of the content. Since this can't be calculated until after the element is rendered, any element within it can't use relative sizes. However, I was unable to eliminate the vertical scroll bar. I'm not even quite sure where this is coming from. My guess is it's the window chrome. Perhaps you could set the height of the body tag onload with JavaScript? Ben Rogers http://www.c4.net v.508.240.0051 f.508.240.0057 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";> <html style="height: 100%; width: 100%;"> <head> <title></title> </head> <body style="height: 100%; width: 100%; margin: 0px;"> <div style="height:100%; padding-bottom: 100px;"> <table border="1" cellpadding="0" cellspacing="3" style="width:100%; height:100%;"> <tr style="height:40px; width: 100%;"> <td id="doc_title" colspan="2" style="height:40px;">onTap Framework</td> </tr> <tr style="height:20px; width: 100%;"> <td id="doc_ladder" colspan="2" style="height:20px;">Home</td> </tr> <tr> <td colspan="2" style="height:80%; width: 100%;"> <div style="height:100%; width:100%;"> <table border="0" cellpadding="0" cellspacing="0" style="height:100%; width: 100%;"> <tr> <td style="padding: 2px; height:100%; width: 250px;"> <iframe name="nav_frame_menu" frameborder="1" height="100%" width="250"></iframe> </td> <td style="padding: 2px; height:100%; width: 100%;"> <iframe name="nav_frame_content" frameborder="1" height="100%" width="100%"></iframe> </td> </tr> </table> </div> </td> </tr> <tr style="height:60px;"> <td colspan="2" valign="top" style="height:60px;"> <form name="paypal_donation_form" action="https://www.paypal.com/cgi-bin/webscr"; method="post" style="margin: 0px;"> <input type="hidden" name="cmd" value="_xclick" /> <input type="hidden" name="business" value="[EMAIL PROTECTED]" /> <input type="hidden" name="item_name" value="onTap Framework" /> <input type="hidden" name="item_number" value="ontapframework" /> <input type="hidden" name="no_note" value="1" /> <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="tax" value="0" /> <input name="submit" type="image" border="0" style="border:0px; background-color:transparent; float: left;" alt="Make a donation." src="http://mx/otp/test/_components/docs/_images/donations.gif"; /> </form> <A target="_blank" href="http://affiliates.macromedia.com/b.asp?id=2549&p=go/dr_home_aff1";> <img align="right" border="0" style="float: right;" src="http://affiliates.macromedia.com/showb.asp?id=2549&img=mx2004_468x60_b. gif" /></a> </td> </tr> </table> </div> </body> </html> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Special thanks to the CF Community Suite Gold Sponsor - CFHosting.net http://www.cfhosting.net Message: http://www.houseoffusion.com/lists.cfm/link=i:4:188297 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
![http://mx/otp/test/_components/docs/_images/donations.gif"](http://mx/otp/test/_components/docs/_images/donations.gif"){kind=link}