The Triple Box Method
The what?! I’d ignore this old post.
A good friend and web design colleague, Jonathan “Jona” Fenocchi suggested I write a piece on this obscure topic as he felt some folks might be interested and intrigued. I decided he was right and that I should do just that. I have a method of doing away with some popular hacks used to solve Microsoft’s Internet Explorer’s inability to properly interpret cascading style sheets the way other more standards-compliant browsers do.
Special concessions drawn from a bag of tricks to make up for these inabilities have been invented by some of the finest minds in web design. I don’t use them, though, as I have chosen to go about it another way. I decided to allow Internet Explorer to have its way. To let it mess things up however it chooses and to instead allow built-in but visually allowable margins of error for these corruptions. You may be wondering why I have chosen to do this. The answer is a simple one: When and if Microsoft addresses these issues I fear that many people will have to go back and remove their hacks or reinvent them as most of these tricks are addressed to Internet Explorer as a whole, not specific to an "IE" version. This could cause some serious problems. That’s a drawback to hacks. Perhaps you’ve heard or used the expression hack-job. Such as repairing a broken part with duct tape as being called such. Why? Well hack jobs are usually temporary fixes. They break again sooner than we care for them to. I’m trying to stay ahead of the curve by not employing hacks, but simply, again I’ll say it, using visually allowable margins of error for these corruptions.
This potential problem may happen sooner than we think. Microsoft will be release Internet Explorer version 7.0 in the near future. I fear the new version may still see and interpret the hacks, though, even though it may be a more compliant browser. I fear that this may cause some of these solutions to break otherwise solid web pages. What a pain that might be. I’m way too lazy to deal with that stuff if it happens as I suspect it will. If I’m wrong I will have to do nothing, but if I’m right, I’ll still be all set — riding high and dry in the safe zone.
In researching this article above I did find other references demonstrating the same feelings I have regarding hacks and their misuse, abuse, and the dangers inherent therein, articles such as Hick’s Beware the Cascading Style Sheet (CSS) Hackers and Peter-Paul Koch’s Digital Web article aptly named Keep CSS Simple — I’m glad to learn I’m not alone. Before, however, I knew of such things (yes, I’m very much a self-learner, one who marches to his own drummer) I came to my own conclusions and had created my Triple Box Method. One link in particular discusses these methods in a similar tone, known as Onion Skinned Drop Shadows by Brain Williams, was done for the same reasons I initially had for fussing with this stuff: to make drop shadows. It was my moment of discovery. Some of this stuff is also discussed by the well-known web-standards guru Jeffery Zeldman.
So, finally, my Three Box Method: Three boxes, nested. A box in a box in a box. Nested Divs (not to be confused with the horribly inefficient and hated nested tables). Why? To foil the fudge-factor, that’s why? It works like so: An outer box, using no padding, employs absolute positioning based on margin only (something the browsers seem to agree on). This outer box, on a single-boxed site is typically called the "wrapper" (as I do) or the "container" as it wraps or contains, and thus holds-in-place everything on the page. The middle box is held absolutely so, or relatively (your choice), away from the outer box — again using no padding. I use absolute positioning. This creates a barrier to allow for the browser differences so no padding is needed. I call this box the "cap." Then, to contain the content, so it doesn’t touch the cap or middle box, thus allowing the needed leeway, positioned absolutely or relatively (again I go about it absolutely), is the inner box I refer to as "fill." Now, it is necessary to create gaps using margins between these boxes because if you don’t do this, everything within will touch. If you do it that way, then you will need to employ padding and that is the dreaded and unsupported discrepancy. Padding, you see, always needs to be zero. Zero is universal whereas numerical values are not. Numerically-valued padding may be inside the box on some browsers and outside the box on others. A real pain it is if you try to work with it (thus one must employ the needed hacks). The best way to deal with it, in my opinion, is to avoid padding altogether. The background colors or patterns of the cap and fill boxes need to match for these margin-created gaps to work as planned, and if drop-shadows are to be applied, then that must happen at the outer edge of the middle box and made to a width not exceeding the gap distance. I suggest 10 to 20 pixels, depending on the depth of the drop shadow. Not all of the styles available on my old dportfolio site employ drop shadows, but some, like "City Slick," "Forest," and "IronWorks" do. Check it out. See how this is written by clicking on the CSS Link at the footer of Green-Beast.com. Scroll down the resulting style sheet validation page to view my style sheet and look for any box by division-name, then look for division-name-cap, then division-name-fill and you’ll get a working model.
Update: Ignore this 
Adam Ballard responds:
Posted: October 31st, 2005 at 11:33 am →
Cool stuff. Keep up the good work.