It’s best not to mess with the clearfix as it has be specially constructed to target browsers and browser bugs through the ages.
IE6 and 7 don’t understand :after so there is no point using zoom in that rule. You could replace the last bit with zoom.
.clearfix {display:inline-block;}
/*mac hide \\*/
.clearfix {display:block;}
/* */
replace to:
.clearfix{zoom:1.0}
However you lose IE5 mac on the way which is no big deal.
The height:0 in the first rule ii not for IE anyway but for all browsers that understand :after so that any space the “.” rule adds is negated. the visbility:hidden is to hide the generated content (i.e. the dot).
Suffice to say that the clearfix is a myriad of styles that are best left alone unless you know what you are doing
(2) I don’t need overflow:visible after zoom:1.0 do I?
No only when you use the height:1% hack in case there is an overflow:hidden rule cascading through from somewhere else.
(3) How do you know when to place a space after the ID and when not to? e.g. why is it this:
#footernav .navbox {} /with space/
#txtnav h3 {}
and yet also this:
h1.hdr { } /with no space)/
You know this already
When there is a space between elements it identifies a descendant selector structure (div p {color:red}). You wouldn’t say divp {} and expect it to be the same would you?
(the white space is actually called a combinator (the combinator we use in a descendant selector is a whitespace character;a space, horizontal tab, carriage return, line feed, or form feed))
e.g.
div .test{} - Will target the element that has a class of test because it is a descendant of the parent div:
<div><p class=“test”> test </p></div>
However div.test would mean that the structure was this:
<div class="test"><p> test </p></div>
The difference being that the class is attached to the div itself.
(4) Is there a blanket rule that every class within an ID (and you know you’ll never use that class outside of that ID) should be preceded by the ID? e.g. should this:
The rule is specificity and can be calculated exactly and I went into specific detail here
The simple answer is that you must always use a rule in the same format as you previously did to make sure that it has equal (or more) weight and therefore the one later in the stylesheet will win out.
If you originally said #footer p {color:blue} - It would do you no good to add a class to that p element and say p.warning {color:red}. the p element would still be blue because the former rule wins out.
To make the p element turn red you would need to use the original format with the class added (e.g. #footer p.warning{color:red}).
It’s a logical process and not really as complicated as it sounds. In practice just target elements in the same way that they were targeted before to make sure the new rules work.