I've added pro's and con's, and an additional method + examples for each except tables.
I've done a bit of reading and I think Trident does handle the CSS rendering, not outsourced engines. Half the reason Mac IE is so much better than Win IE is it uses the Tasman rendering engine (aging but excellent). Also, Jeff Zeldman mentions nothing about outsourced CSS rendering engines in his book's Appendix "Browsers: The Good, the Bad, and the Ugly"... If anyone else can find some evidence of Trident not handling the CSS rendering in comparison to the Gecko and Tasman engines, please give a hollar. Thank you for the feedbacks, keep them coming :) --Ryan Christie http://www.theward.net Quoting russ weakley <[EMAIL PROTECTED]>: > Hi Ryan, > Excellent article! Can I suggest a couple of small points: > > Within the section "Method One: Don't use padding and borders", this seems a > bit of a sweeping statement : > "Please note, your code WILL be more lengthy" > > There are times when this method is much longer in CSS code and other times > when it isn't - it really depends on specific examples. In your example, the > code is much longer, but it might be better to make a less definitive > statement like: > "Please note, your code COULD be more lengthy" > > There are also a couple of other methods of getting around the box model > problem. Like any method they have weaknesses, but should be mentioned: > > 1. Double nested divs. You apply no padding to the outer div, and padding to > the inner div - without setting a width. This is not a very semantically > correct option (due to extra divs), but it has been widely used. > > HTML > <div class="outer"> > <div class="inner"></div> > </div> > > CSS > .outer { width: 200px; } > .inner { padding: 1em 0; } > > 2. Padding the content. This is similar to Method 1 but needs to be explained > as it is a simple and powerful option. It involves applying padding to > content within the div, rather than the div itself - this is a very common > solution to the problem, and can be achieved using one CSS rule set like: > > #container p, #container h1, #container h2 { padding: 1em 0; } > > It may also be worth outlining the pro's and con's of each method so that > users can chose one which is more semantically correct, or possibly easier to > execute. > > Be warned, I slapped together the code samples above in both examples and > they haven't been tested on anything. :) > > Anyway, a great article and a great idea! > Russ ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
