The Universal Selector and Other Things

I was building my first website after reading Andy Budd’s book CSS Mastery, and i learned a few tricks, one of which was the awesome universal selector. Its basically a method of applying a style to all of the elements in the known universe…errr….an X/HTML document. Like so:

* { margin: 0; padding: 0; }

As you can probabaly guess, this resets the padding and margin values of all elements to 0. So what? Well, this method fixes a lot of discrepancies in positioning/layout across different browsers since each has its own default values for margin and padding (e.g. the h1 tag in IE6 might have a default padding of 10px, while Firefox’s is 15px). Now you can rule out  margins and padding as culprits in layout problems..

Another little trick i learned is for times when (and this just happens in IE6 if im correct) your elements (especially DIVS) collapse, which occurs when two elements’ edges touch. The trick is to set a height value to the element thats causing the ruckus. A value of 1% usually mitigates the offending character:

#problematicCollapsingDiv { height: 1%; }

I learn something new everyday.