Well, I have to say that I've been proven wrong, since the page you are looking at is brought to you by the graces of XML/XSL Transformations. I decided to go with the HTML 4.01 Strict DTD as opposed to the Traditional DTD. To my amazement there was a lot that has changed since earlier versions. Workarounds that don't work anymore, and tricks that sadly I'll have to find workarounds to do again until all the browsers are 100% compliant. Then again, maybe these tricks should be considered bad practice and not done. Either way, that is not in the scope of this writing.
One thing I did run into was that, as opposed to the Transitional way, is that 100% now seems to mean 100% of the parent node. I was quite accustomed to using tables that had heights of 100% then setting one of the TD's to 100% to get the layout to span the whole page. That still works as long as you are content that you can only have one row, not multiple rows. When you add another row to the equation, the browser simply pushes the table down by the amount of pixels that the new rows uses (100% of the table's initial height + xPX for the new row). This was of course unacceptable for me, and I had to go on a crusade for a fix.
It amazes me sometimes how people are on the net. It seems to me that if you have a problem then ask on a forum how to fix said problem, that if you seem to fix that problem you should not just put "I fixed it. Nevermind." Apparently I'm wrong, because this seems to be standard practice. Is it so much to ask that if you requested help that you at least provide the answer for those that come to follow? It seems so, as sad as thay may be.
Thanx to some unknown stranger out there though, I have come accross a fix for this little compliance problem. and it goes back to those Div/CSS layouts. No Javascript to resize stuff, just plain Divs and CSS! I'd now like to take the time to thank [b]Borvik[/b], a person who left a href="http://tek-tips.com/viewthread.cfm?qid=1027744&page=1">this nice post on Tek-Tips.com. I am mainly going to be reiterating what he said there so we have more than one place on the net that this resides, though mine differs slighty from his, but you should get the idea on how to create your own based on the information given here.
To start I want to just show you the base Div Structure that I have set up for this site. There are a total of 6 divs for my layout (which as of the writing of this you might not know where they all are, but you'll see it in my file.). It is also note worthy mentioning that at the time of this writing this site used a Header, Vertical menu bar, footer, left side and main content windows. Here is the a sample of my layout:
<div class="page_vertMenu"><a style="text-decoration: none;" href="index.html">{writings}</a>{news}</div>
<div id="page_content" class="page_content">
<div class="page_content_sideBar">insert side bar items here.</div>
<div class="page_content_mainContent">insert main content here.</div>
</div>
<div class="page_footer">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: left;" class="topMenu">This page took .016 seconds to process using ColdFusion 7</td>
<td style="text-align: right;" class="topMenu">© 2004 Gargoyle and Sun Productions</td>
</tr>
</tbody>
</table>
</div>
html { overFlow : hidden; }
/* Div Layout */
div.page_header { position : absolute; left : 0px; right : 0px; top : 0px; height : 50px; }
div.page_vertMenu { position : absolute; left : 0px; right : 0px; top : 50px; height : 16px; }
div.page_content { position : absolute; left : 0px; right : 0px; top : 68px; bottom : 17px; overflow : auto; text-align : center; height:expression(document.body.clientHeight-parseInt(this.currentStyle.top,10)- parseInt(this.currentStyle.bottom,10)+'px'); width: expression(document.body.clientWidth-parseInt(this.currentStyle.left,10)- parseInt(this.currentStyle.right,10)+'px'); /*overflow-x:auto;*/ }
div.page_footer { position : absolute; left : 0px; right : 0px; bottom : 0px; height : 16px; vertical-align : bottom; }
div.page_content_sideBar { position : absolute; left : 0px; top : 0px; height : 100%; width : 100px; }
div.page_content_mainContent { position : absolute; left : 100px; top : 0px; right : 0px; height : 100%; }
/* end of Div Layout */
<div class="page_content_rightSideBar">Right content goes here</div>
/*and inside the CSS file add:*/ div.page_content_rightSideBar { position : absolute; top : 0px; right : 0px; height : 100%; width : 100px; } /*you'll also want to make sure you change the right attribute of your main content div to '101px'*/
It took me a little while (while actually writing this article) to figure this out 100%. I was always under the assumption that 'position:absolute' positioned an object in the window. Well, if you didn't know, as I didn't, this is incorrect. That attribute set to absolute, positions an object within it's container. now this did not allow me to do the collapsing sidebar as I originally stated I did (without testing it.....stupid me). This for most won't matter as most pages either have the sidebars or don't have them. I am still going to work on the collapsable sidebars (without using JS) and if I come up with a solution, I will most definately post it on here for you all to read.
I am not 100% sure on how absolute positioning works. I was under the impression that when you positioned an element it was in respect to it's container. For the most part this is true. I have successfully created a 3 column layout using this theory. However last night I tried to make the whole page scrollable by putting all my divs in one container (a master div if you will). Everthing still worked with one exception: the footer. When I set the bottom and the right attributes it still set them in respect to the window and not the div that contained it. I plan on doing more research on this subject and I will write as I progress.-SirMeili
P.S. - For those of yo uwho care: There is a big draw back to this style layout. While on IE this works flawlessly, FireFox has a bug that does not allow you to scroll using the scroll wheel unless you have a link in that div that has focus on it. I'm sure you've figured this out if you are viewing this page with FireFox already. I have put in a bug report at Bugzilla to let them know if this bug. I don't see a fix coming soon, this problem has been around for a long time and as the time of me reporting the bug it had already been reported and claimed "fixed". Since I am running the newest version and that bug report was inserted in 2001, I don't think it's fixed yet. I love FireFox, so don't comment that I'm bashing it. I'm writing to you on it now. (They replied with what I think was them saying that it will be fixed in 1.1 YEAH!!!!)
