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
>
> Hey, this is my first attempt at making up a tutorial. By all means correct me
> on anything that's wrong :) ... this goes out to all you CSS Hack gripers on
> here heh. Enjoy.
>
> http://web.theward.net/dodgingcsshacks.html
>
> --Ryan Christie
> http://www.theward.net
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
